1

I am building a multi page react app. When I enter the URL manually everything works, but when I change the page by using Link from react router, even though URL changes, page content stays in main page until I refresh it manually.

Here is my route code.

import Navbar from "./components/navbar/Navbar";
import { Route, Switch } from "react-router-dom";
import MainPage from "./pages/MainPage";
import Places from "./pages/Places";

function App() {
  return (
    <div className="App">
      <Navbar />
      <Switch>
        <Route path="/" exact>
          <MainPage />
        </Route>
        <Route path="/places">
          <Places />
        </Route>
      </Switch>
    </div>
  );
}

export default App;

And my Link elements

<div className={classes['right-buttons']}>
 <ul>
   <li><Link to='/places'>About The City</Link></li>
   <li><Link to='/culture'>Where To See</Link></li>
   <li><Link to='/food'>What To Eat</Link></li>
 </ul>
</div>
Berkay Sönmez
  • 11
  • 3
  • 1
    What versions of `react` and `react-router-dom` are you using? You can check by running `npm list react react-router-dom` in the terminal from the project's root directory. – Drew Reese Jul 11 '22 at 15:30
  • I am using react 18.2.0 and react-router-dom 5.1 – Berkay Sönmez Jul 11 '22 at 15:34
  • I see, then I suspect this [answer](/a/71833424/8690857) will resolve your issue. There's an issue between RRD and React 18 that is fixed in RRDv5.3.3. – Drew Reese Jul 11 '22 at 15:35

0 Answers0