React中useNavigate()报错：需在<Router>组件上下文使用的问题咨询

你遇到的错误核心是：useNavigate() 钩子必须在 <BrowserRouter>（或任何React Router提供的Router组件）的内部组件中调用，而你的代码里，useNavigate() 是在App组件中直接声明的，但App组件本身位于<BrowserRouter>的外部，没有被Router的上下文覆盖，所以无法获取到导航所需的上下文信息。

有两种常见的修复方式：

方式一：将BrowserRouter提升到App组件外部 #

在项目的入口文件（通常是index.js）中用<BrowserRouter>包裹整个App组件，这样整个应用都处于Router的上下文环境中，App组件内部就能正常使用useNavigate()了：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

然后修改App组件，移除内部的<BrowserRouter>：

// App.jsx
import { Route, Routes, useNavigate } from 'react-router-dom';
import MyNav from "./MyNav";
import Login from "./routes/Login"

function App() {
  const navigate = useNavigate();
  // 这里可以正常使用navigate了
  return (
    <div className="App">
      <MyNav />
      <Routes>
        <Route path="/login" element={<Login />} />
      </Routes>
    </div>
  );
}
export default App;

方式二：将useNavigate移到Router内部的组件中 #

如果不想修改入口文件，也可以把需要使用useNavigate()的逻辑移到<BrowserRouter>内部的子组件里，比如把导航逻辑放到MyNav组件中：

// App.jsx
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import MyNav from "./MyNav";
import Login from "./routes/Login"

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <MyNav /> {/* MyNav在Router内部，可以正常使用useNavigate */}
        <Routes>
          <Route path="/login" element={<Login />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

然后在MyNav组件中使用useNavigate()：

// MyNav.jsx
import { useNavigate } from 'react-router-dom';

function MyNav() {
  const navigate = useNavigate();
  
  const goToLogin = () => {
    navigate('/login');
  };

  return (
    <nav>
      <button onClick={goToLogin}>去登录页</button>
    </nav>
  );
}
export default MyNav;

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