链接在5.3.0版本的react-router-dom中不起作用。请任何人解决这个问题

Question

“链接”无法正常工作。请任何人解决这个问题。我尝试了很多方法但没有一个有效。当我点击主页或关于时，它不会移动到另一侧，我必须手动重新加载这一侧。

header.js

import { Link } from "react-router-dom";
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
<Link className="nav-link" to="/about">About</Link>

应用程序.js

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
<Router>
    <Header title="My Todos List" />
    <Switch>
      <Route
        exact
        path="/"
        render={() => {
          return (
            <>
              <AddTodo addTodo={addTodo} />
              <Todos todos={todos} onDelete={onDelete} />
            </>
          );
        }}
      ></Route>
      <Route exact path="/about">
        <About />
      </Route>
    </Switch>
    <Footer />
  </Router>

包.json

{

“名称”：“todos-list”，“版本”：“0.1.0”，“私有”：true，“依赖项”：{“@testing-library/jest-dom”：“^ 5.16.4”，“ @testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^5.3.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" },

Answer 1

这是我在 React 18 中遇到的主要问题。

您可以通过两种方式解决这个问题

1. 回到 REACT 版本 16，他们的 React router dom 版本 5 工作得很好

我曾经用react版本16来解决这个问题去结帐

2. 升级你的React Router版本6并与React 18一起使用

如果您想查看此代码的实际效果，这里是 React-router-dom 版本 6 的代码

我的建议是移动react-router版本6，它更强大，你可以查看文档。

这里 Switch 替换为 Routes。

 export default function App() {
  return (
   <Router>
    <Header title="My Todos List" />
    <Routes>
     <Route
      exact
      path="/"
      element={
        <>
          <h2>todo</h2>
          <p>deleteTodo</p>
        </>
      }
     />
     <Route path="/about" element={<About />} />
    </Routes>
   </Router>
 );
}

标头

另外，使用 Nav 链接进行导航，以使用 React-router dom 6 中的活动类功能

function Header() {
 return (
  <header>
   <NavLink
    className={({ isActive }) =>
      isActive ? "active nav-link" : "nav-link"
    }
    aria-current="page"
    to="/"
   >
    Home
   </NavLink>
   <NavLink
    className={({ isActive }) =>
      isActive ? "active nav-link" : "nav-link"
    }
    to="/about"
    >
    About
   </NavLink>
  </header>
 );
}