我想从 react-router-dom 使用 useNavigation() ，但出现以下错误：

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(
    <React.StrictMode>
        <Router>
            <App />
        </Router>
    </React.StrictMode>
);

我还使用如下路由：

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 (
        <div className="App">
            <Routes>
                <Route exact path="/" element={<div>Home</div>} />
                <Route path="/login" element={<Login />} />
                <Route path="/signin" element={<SignUp />} />
                <Route path="/projects" element={<Projects />} />
                <Route
                    path="/main"
                    element={
                        <Main
                            nav={<NavBar />}
                            sideMenu={<SideMenu />}
                            content={<Content />}
                        />
                    }
                />
            </Routes>
        </div>
    );
}

我的 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 (
        <div className="navbar">
            <ul className="nav-list">
                <li className="nav-item">
                    <button className="nav-login" onClick={handleClick}>
                        Login
                    </button>
                </li>
            </ul>
        </div>
    );
}

所以最后，我的 NavBar 组件在 BrowserRouter 内，但根据错误，我理解事实并非如此。 有人对这种情况有解决方案吗？