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>