Ссылка не работает в react-router-dom в версии 5.3.0. Пожалуйста, кто-нибудь решит эту проблему

«Ссылка» не работает должным образом. Пожалуйста, кто-нибудь решит эту проблему. Я пробовал так много способов, но ни один из них не работает. Когда я нажимаю на дом или около, он не перемещается на другую сторону, мне приходится перезагружать сторону вручную.

Заголовок.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>

App.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-список", "версия": "0.1.0", "частное": правда, "зависимости": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/реагировать": "^13.3.0", "@testing-library/user-event": "^13.5.0", "реагировать": "^ 18.2.0", "реагировать-дом": "^ 18.2.0", "реакция-маршрутизатор-дом": "^ 5.3.0", "реагировать-скрипты": "5.0.1", "веб-виталы": "^2.1.4" },

🤔 А знаете ли вы, что...
React Testing Library - это инструмент для тестирования компонентов React.


631
1

Ответ:

Решено

This is the main issue I faced in React 18.

Вы можете решить эту проблему двумя способами

1. Вернитесь к REACT версии 16, и их React Router dom версии 5 работает нормально.

Раньше я реагировал на версию 16, чтобы решить эту проблему, перейдите к оформлению заказа

2. Обновите свой React Router версии 6 и используйте с React 18.

Вот код с react-router-dom версии 6, если вы хотите увидеть этот код в действии

Мое предложение состоит в том, чтобы переместить реактивный маршрутизатор версии 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>
 );
}