react router Link can not jump to the page

Question

I have been use react-router-dom for my project... here is my code:

App.js:

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  const currentUser = true;

  return (
    <Router>
      <Topbar />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/register">
          {currentUser ? <Home /> : <Register />}
        </Route>
        <Route path="/login">{currentUser ? <Home /> : <Login />}</Route>
        <Route path="/post/:id">
          <Single />
        </Route>
        <Route path="/write">{currentUser ? <Write /> : <Login />}</Route>
        <Route path="/settings">
          {currentUser ? <Settings /> : <Login />}
        </Route>
      </Switch>
    </Router>
  );
}

Topbar.jsx:

function Topbar() {
  const user = true;
  return (
    <div className="top">
        <div className="topLeft">
            <span className="topIcon iconfont icon-weixin"></span>
            <span className="topIcon iconfont icon-weibo"></span>
            <span className="topIcon iconfont icon-douyin"></span>
        </div>
        <div className="topCenter">
            <ul className="topList">
                <li className="topListItem"><Link className="link" to="/">HOME</Link></li>
                <li className="topListItem"><Link className="link" to="/">ABOUT</Link></li>
                <li className="topListItem"><Link className="link" to="/">CONTACT</Link></li>
                <li className="topListItem"><Link className="link" to="/write">WRITE</Link></li>
                <li className="topListItem">
                    { user && "LOGOUT" }
                </li>
            </ul>
        </div>
        <div className="topRight">
            {
                user ? (
                    <img className="topImg" src="https://assets.imgix.net/hp/snowshoe.jpg?auto=compress&w=900&h=600&fit=crop" alt="profile" />
                ) : (
                    <ul className="topList">
                        <li className="topListItem"><Link className="link" to="/login">LOGIN</Link></li>
                        <li className="topListItem"><Link className="link" to="/register">REGISTER</Link></li>
                    </ul>
                )
            }
            
            <span className="topSearchIcon iconfont icon-sousuo"></span>
        </div>
    </div>
  )
}

When I click the <Link /> to the <Write/> component, the URL change, but the page is not change... has anyone know why? many people say about exact property, but I already add that in the <Home/> component.

in app.js it seems you missing import to the components. usually what you describing is probably app error, look at the console, what do you get? — benjamin, May 03 '22 at 13:33
Thanks, I found the solution... it's the version problem, I use react18 and the react-router-dom v5... and I change the react-router-dom to v6, the problem solved! — fengqi chen, May 03 '22 at 14:35

score 0 · Answer 1 · answered May 03 '22 at 14:36

0

I found the solution... it's the version problem, I use react18 and the react-router-dom v5... and I change the react-router-dom to v6, the problem solved!

answered May 03 '22 at 14:36

fengqi chen

21
1

react router Link can not jump to the page

1 Answers1