CODEWITHSUNDEEP
javascriptreactjsreact-router
Miltosh
Miltosh

Reputation: 91

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

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

Upvotes: 0

Views: 88

Answers (2)

Marcin Matusiak
Marcin Matusiak

Reputation: 21

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>
  );
}

Upvotes: 1

useryg
useryg

Reputation: 134

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

Upvotes: 1

Related Questions