react-router-dom提示无useNavigate导出成员报错排查

DevOps 小满

2026-8-26

错误根因

从报错列出的可导出项（包含useHistory、Switch、Redirect，无v6专属API）可以直接判定：本地安装的react-router-dom为v5及更早版本，useNavigate是v6版本才正式提供的钩子，和拼写错误无关。

可选解决方案

根据项目实际需求二选一即可：

方案1：升级依赖到v6版本（匹配你参考的实现逻辑）

执行以下命令升级到v6稳定版：

npm uninstall react-router-dom
npm install react-router-dom@6

升级后即可正常导入使用useNavigate，基础点击跳转示例：

import { useNavigate } from "react-router-dom";

function NavButton() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate("/your-target-path")}>
      跳转页面
    </button>
  );
}

注意v6存在破坏性更新，升级后需要同步修改原有路由语法：

原Switch组件替换为Routes
原Redirect组件替换为Navigate
路由定义、嵌套路由、参数匹配的写法需适配v6规则

方案2：保留v5版本，使用原生API实现同等跳转能力

如果项目已有大量v5路由逻辑、暂时不适合大版本升级，不需要强行使用useNavigate，直接调用v5内置的useHistory钩子就能实现完全一致的跳转效果：

import { useHistory } from "react-router-dom";

function NavButton() {
  const history = useHistory();
  return (
    <button onClick={() => history.push("/your-target-path")}>
      跳转页面
    </button>
  );
}

如果需要替换当前历史记录（点击跳转后不保留回退到当前页的入口），把history.push替换为history.replace即可，效果和v6中navigate(path, { replace: true })完全一致。