react-router-dom not rendering components on route change

Question

If I click on a navigation link, I can see that the slug has changed but the component is not rendering. I have to manually refresh the page in order to see the component, while the page should re-render by itself on route/slug change.

App.js

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Me from './components/me';
import Contrib from './components/contrib';
import Projects from './components/projects';
import Contact from './components/contact';

class App extends Component {
  render() {
    return (
      <div className="container">
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Me} />
            <Route path="/contrib" component={Contrib} />
            <Route path="/projects" component={Projects} />
            <Route path="/contact" component={Contact} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

header.jsx

import { BrowserRouter, NavLink} from 'react-router-dom';

const Header = () => {
    return (
        <div className="container">
            <div id="logo">
                <img src={Earth} alt="placeholdit" className="rounded" />
            </div>
            <nav>
                <BrowserRouter>
                    <ul>
                        <li><NavLink to="/">Home</NavLink></li>
                        <li><NavLink to="/contrib">Contributions</NavLink></li>
                        <li><NavLink to="/projects">Projects</NavLink></li>
                        <li><NavLink to="/contact">Contact</NavLink></li>
                        <li></li>
                    </ul>
                </BrowserRouter>
            </nav>
        </div>
    )
}

If I remove the <BrowserRouter> from header.jsx I get an error telling me that: "You should not use <Route> or withRouter() outside a <Router> " .

If add the <BrowserRouter> inside of header.jsx the error is gone, but the components are not rendering on route/slug change.

Answer 1

You need to wrap around the highest order component for it to work as expected. If your app is simple, wrap it within ReactDOM.render method. Like so

ReactDOM.render((
<BrowserRouter>
  <App/>
</BrowserRouter>),
document.getElementById('root'))

Answer 2

I had the same problem. Delete the from header.jsx and put it in your index.js like this:

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
, document.getElementById('root'));

Answer 3

Be careful with the order of Route , Switch and Router . I follow this order and it works for me. Note: Try to use the Arrow function

import React from "react";
import { Switch, Route, Router } from "react-router-dom";
// Containers
import { Dashboard, CardPayment } from "../Containers";

const history = createBrowserHistory();

const ReactRouter = () => {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/dashboard" component={Dashboard} exact={true} />
        <Route path="/card-payment" component={CardPayment} exact={true} />
        <Route path="/" component={Dashboard} exact={true} />
      </Switch>
    </Router>
  );
};

export default ReactRouter;

Answer 4

In my case, a Router was used, and downgrading the "history" library fixed the problem.

app.tsx

<Router history={history}>
  <Switch>
    <Route exact path={`${AppRoute.ALBUMS}/:author/:album`} component={PhotosPage}/>
    <Route exact path={`${AppRoute.ALBUMS}/:id`} component={AlbumsPage}/>
    <Route path={AppRoute.ERROR} component={ErrorPage}/>
    <Route path={AppRoute.ROOT} component={AuthorsPage}/>
  </Switch>
</Router>

Versions in my project:

package.json:

...
"history": "4.10.1",
"react-router-dom": "5.2.0",
...

The "history" library was originally version "5.0.0"

Answer 5

For those who couldn't fix this error

Step 1: Make sure the higher order component wrapped with Router. In the above question it's already done.

class App extends Component {
  render() {
    return (
      <div className="container">
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Me} />
            <Route path="/contrib" component={Contrib} />
            <Route path="/projects" component={Projects} />
            <Route path="/contact" component={Contact} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

Let's consider <Header/> sits inside the any of the components in the <Route/>

Step 2: If higher order component already wrapped with Router , don't wrap the <Header/> also, if you don't want separate routing inside the <Header/> .

import { NavLink} from 'react-router-dom';

const Header = () => {
    return (
        <div className="container">
            <div id="logo">
                <img src={Earth} alt="placeholdit" className="rounded" />
            </div>
            <nav>
                <ul>
                        <li><NavLink to="/">Home</NavLink></li>
                        <li><NavLink to="/contrib">Contributions</NavLink></li>
                        <li><NavLink to="/projects">Projects</NavLink></li>
                        <li><NavLink to="/contact">Contact</NavLink></li>
                        <li></li>
                    </ul>
            </nav>
        </div>
    )
}

Answer 6

Check the Index.js, Remove the Strict Mode and the render.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
//Remove these 
  // <React.StrictMode>
  //   <App />
  // </React.StrictMode>
// Add these
  <BrowserRouter>
    <App/>
  </BrowserRouter>
);

Answer 7

<Link to ={"/home"}>Home</Link>

在我的情况下，我忘记在“to”参数中添加括号，然后它正在渲染组件