Ошибка React Router: useNavigation необходимо использовать в маршрутизаторе данных ⇐ Html

[Anonymous]

Я хочу использовать useNavigation() из response-router-dom, но получаю следующую ошибку:

Код: Выделить всё

Error: useNavigation must be used within a data router.
See https://reactrouter.com/en/main/routers/picking-a-router.

NavBar
src/components/NavBar.js:6
3 | import { useNavigation } from "react-router-dom";
4 |
5 | function NavBar() {
> 6 |   const navigate = useNavigation();
7 |   const handleClick = (e) => {
8 |       navigate("/login");
9 |   };

Но я обернул все свое приложение с помощью BrowserRouter вот так:

Код: Выделить всё

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(





);

Я также использую маршруты, показанные ниже:

Код: Выделить всё

import SideMenu from "./components/SideMenu";
import Content from "./components/Content";
import Projects from "./pages/Projects";
import { Routes, Route } from "react-router-dom";

function App() {
return (









);
}

А мой компонент NavBar выглядит так:

Код: Выделить всё

import React from "react";
import "./NavBar.css";
import { useNavigation } from "react-router-dom";

function NavBar() {
const navigate = useNavigation();
const handleClick = (e) => {
navigate("/login");
};
return (

[list]
[*]

Login


[/list]

);
}

Итак, в итоге мой компонент NavBar находится внутри BrowserRouter, но судя по ошибке, я понимаю, что это не так.
Кто-нибудь есть решение для этого случая?

Подробнее здесь: https://stackoverflow.com/questions/743 ... ata-router