React Router v6报错：useNavigate()仅可在<Router>组件上下文使用

常见问题及修复方案 #

1. 确认LoginPage完全被Router包裹 #

• 检查index.js是否渲染的是App组件，而非直接渲染LoginPage：

  // index.js 正确写法
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
  

  要是直接在index.js里渲染<LoginPage />，它会脱离Router上下文，必然触发报错。

• 检查App.js里的<BrowserRouter>是否包裹了所有路由相关组件，确保<Routes>、<Route>都在<BrowserRouter>内部，别把LoginPage的渲染逻辑放在Router外部。

2. 确保useNavigate在函数组件/自定义Hook中调用 #

useNavigate是React Hook，绝对不能在类组件里使用。如果你的LoginPage是类组件，要么改成函数组件，要么适配v6的写法（v6已移除withRouter高阶组件，优先推荐转函数组件）。

3. 检查路由配置是否正确 #

确保LoginPage是通过<Route>的element属性渲染的，别在脱离Router上下文的组件里硬编码渲染<LoginPage />。

4. 核对依赖版本 #

确认安装的是react-router-dom v6版本，执行npm list react-router-dom查看版本号，应为6.x.x。版本不对的话重新安装：

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

验证方式 #

如果以上步骤都没问题，可以在LoginPage里加个测试，确认是否处于Router上下文：

import { useNavigate, useRouter } from 'react-router-dom';

function LoginPage() {
  const navigate = useNavigate();
  const router = useRouter();

  console.log('Router 上下文存在:', !!router);

  // ...其他登录逻辑
}

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