The component is not re-rendered after linking on react-router

Question

I have a dropdown menu (maked on select/option) in my header. As planned, when user choose item in dropdown menu, react-router will change URL and make rerender page. I have a mistake on last stage. URL changes, but page not rerender

Link to SandBox

Answer 1

All Route and Links Components should by wrapped by BrowserRouter, easiest way to do that is to wrap everything in your App.js return statement by BrowserRouter Component.

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Header from "./components/Header";
import Stats from "./pages/Stats/Stats";

export default function App() {
  return (
    <Router>
      <div className="App">
        <Header />

        <Route path="/stats" exact>
          <Stats />
        </Route>
      </div>
    </ Router>
  );
}

Answer 2

You must use a <Swtich> with routes to select where the matched routes will rendered. And wrap all of that in the <BrowserRouter> or <HashRouter> .

<div className="App">
  <Router>
    <Header />

    <Switch>
      <Route path="/stats" component={Stats}></Route>
    </Switch>
  </Router>
</div>

Link to the sandbox