使用react-router-dom的useNavigation报错：需在data router中使用

错误原因 #

useNavigation 是React Router v6.4+推出的数据路由专属钩子，仅支持由createBrowserRouter等数据路由API创建的路由环境。你当前使用的BrowserRouter是传统浏览器路由组件，不兼容这个钩子，因此报错。

方案一：切换为数据路由（推荐，适合需要数据路由特性的场景） #

用createBrowserRouter和RouterProvider替换原有的BrowserRouter，重构路由配置：

1. 修改index.js文件：

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
// 导入你的页面/组件
import Login from "./pages/Login";
import SignUp from "./pages/SignUp";
import Projects from "./pages/Projects";
import Main from "./components/Main";
import SideMenu from "./components/SideMenu";
import Content from "./components/Content";
import NavBar from "./components/NavBar";

// 定义路由配置
const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Home</div>,
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/signin",
    element: <SignUp />,
  },
  {
    path: "/projects",
    element: <Projects />,
  },
  {
    path: "/main",
    element: <Main nav={<NavBar />} sideMenu={<SideMenu />} content={<Content />} />,
  },
]);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

2. 可删除原App.js中的路由配置，或整合到上述路由定义中。

方案二：改用useNavigate钩子（快速修复，无需重构路由） #

如果不需要数据路由的特性，直接把useNavigation替换为传统路由兼容的useNavigate即可：

修改NavBar.js组件：

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

function NavBar() {
    const navigate = useNavigate();
    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>
    );
}

export default NavBar;

内容的提问来源于stack exchange，提问作者AndaluZ