React中使用useNavigate()报错：需在<Router>组件上下文，求页面跳转方案

错误原因 #

useNavigate() 必须在 <Router> 组件的上下文范围内使用，你用 <Routes> 包裹按钮的做法无效——<Routes> 是用来配置路由规则的组件，它本身也依赖 <Router> 提供的上下文，无法为按钮提供所需的路由上下文。

正确解决方案 #

1. 用Router包裹整个应用（或目标组件树）

在你的根组件（比如 App.jsx/main.jsx）中，使用 BrowserRouter（或其他Router类型，如HashRouter）包裹所有需要使用路由功能的组件：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import FeaturePage from './FeaturePage';
import YourButtonComponent from './YourButtonComponent';

function App() {
  return (
    <Router>
      {/* 所有需要路由功能的组件都要放在Router内部 */}
      <YourButtonComponent />
      
      {/* 路由规则配置 */}
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/FeaturePage" element={<FeaturePage />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 在组件中正确使用useNavigate

按钮所在的组件需要在Router上下文内，然后正常导入并使用useNavigate：

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

function YourButtonComponent() {
  const navigate = useNavigate();

  return (
    <button
      className="whatevr"
      onClick={() => {
        // 推荐使用绝对路径，避免页面层级变化导致的跳转错误
        navigate("/FeaturePage");
      }}
    >
      Features
    </button>
  );
}

export default YourButtonComponent;

关键提示 #

• 不要将非路由配置的组件（比如按钮）放在<Routes>标签内，<Routes>仅用于包裹<Route>定义路由规则。
• 确保所有调用useNavigate、useLocation等路由钩子的组件，都处于<Router>的包裹范围内。

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