1

I am currently using version 6 and I cannot find any modern solution to this one. Since the previous tutorial are using old Browse router version.

import Navbar from './components/Navbar';
import Home from './Home';
import MovieDetails from './components/MovieDetails';
import Footer from './components/Footer';


import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import data from './data/data'
import './App.css';


function App() {
    
  return (
    <Router>
      <div className="App">
        <Navbar></Navbar>
      <Routes>
      <Route exact path='/' element={<Home></Home>} ></Route>
      <Route  path='/movies/:id' element={<MovieDetails ></MovieDetails>} ></Route>
      </Routes>
      <Footer></Footer>
      </div>
    </Router>

  );
}

export default App;

what would be the best way to fix this issue every time I click on a link it keeps its position on the page.

  • Restore what position, where, how? html anchors perhaps? `scroll(0,0)`? Please rephrase your question. – Xorifelse Apr 23 '23 at 00:26
  • Sorry for not being clear. I am talking about when clicking to go to another page in React it just renders the new component but I want to start from the top of the page. – Luis Hernandez Apr 23 '23 at 00:59
  • Does this answer your question? [react-router scroll to top on every transition](https://stackoverflow.com/questions/36904185/react-router-scroll-to-top-on-every-transition) – Xorifelse Apr 23 '23 at 01:07

0 Answers0