«Ссылка» не работает должным образом. Пожалуйста, кто-нибудь решит эту проблему. Я пробовал так много способов, но ни один из них не работает. Когда я нажимаю на дом или около, он не перемещается на другую сторону, мне приходится перезагружать сторону вручную.
Заголовок.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.
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>
);
}