React Router and Link do not render-CodePudding

I'm working on a react app and I found my page does not render when the url changes. See the code below, I have a navigagtion bar with three Link, when I click them, I can see that the url changes in the address bar, but the page is still staying the one from the old url. However if I refresh the page, then the corresponding page to the current url is rendered and presented.

I saw a similar question but the method in it does not work for me, or maybe I use it in a wrong way? React Router or Link Not Rendered

this is the code from my App.js:

import {BrowserRouter, Switch, Route, Link} from 'react-router-dom';
import Home from './booking/Home';
import Login from './auth/Login';
import Register from './auth/Register';

const TopNav = () => (
  <div className="nav bg-light d-flex justify-content-between">
    <Link className="nav-link" to="/">
      Home
    </Link>
    <Link className="nav-link" to="/login">
      Login
    </Link>
    <Link className="nav-link" to="/register">
      Register
    </Link>
  </div>
);


function App() {
  return (
    <BrowserRouter>
      {TopNav()}
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

CodePudding user response：

What is your React Router version? If it's React Router v6. You need to change it like this below:

<Route exact path="/" element={<Home />} />
<Route exact path="/login" element={<Login />} />
<Route exact path="/register" element={<Register />} />

Because using component is from React Router v5, the newest version using element

Hope it helps!

CodePudding user response：

Could you try to use JSX for your TopNav component?

  return (
    <BrowserRouter>
      <TopNav/>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
      </Switch>
    </BrowserRouter>
  );
}

Also put react in scope for your app at the top

import React from 'react';

import {BrowserRouter, Switch, Route, Link} from 'react-router-dom';
import Home from './Home';
import Login from './Login';
import Register from './Register';
import React from 'react';

const TopNav = () => (
  <div className="nav bg-light d-flex justify-content-between">
    <Link className="nav-link" to="/">
      Home
    </Link>
    <Link className="nav-link" to="/login">
      Login
    </Link>
    <Link className="nav-link" to="/register">
      Register
    </Link>
  </div>
);


function App() {
  return (
    <BrowserRouter forceRefresh>
      <TopNav />
      <Switch>
        <Route exact path="/register" component={Register} />
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;