React Router DOM v6 useNavigate在嵌套路由中无响应问题排查

问题概述 #

原Next.js项目迁移至React Router后，因菜单子菜单嵌套Link（a标签嵌套）报错，改用useNavigate替代其中一个Link。已导入useNavigate，但在Layout组件的子组件Menu中通过onClick调用navigate("/login")时无任何反应，无报错信息。

路由配置如下：

<ThemeProvider theme={theme}>
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Main />} />
      <Route path="/login" element={<Main />} />
      <Route path="/reset-password" element={<Main />} />
      <Route path="/renew-password" element={<Main />} />
      <Route element={<Layout />}>
        <Route path="/dashboard" element={<NoPage />} />
        <Route path="/comptes-clients" element={<ClientsAccounts />} />
        <Route path="/comptes-clients/comptes" element={<Accounts />} />
      </Route>
      <Route path="*" element={<NoPage />} />
    </Routes>
  </BrowserRouter>
</ThemeProvider>

排查方向及解决方法 #

1. 检查useNavigate的调用方式 #

确保navigate是在点击事件的回调函数中执行，而非渲染时直接调用：

• ❌ 错误写法：onClick={navigate("/login")}（渲染阶段就执行了导航逻辑，点击时已无效果）
• ✅ 正确写法：onClick={() => navigate("/login")}

2. 确认组件处于路由上下文范围内 #

useNavigate必须在BrowserRouter（或RouterProvider）包裹的组件树中使用。检查Menu组件是否确实是Layout的子组件，且Layout的路由被BrowserRouter包裹——从你的路由配置看这一点没问题，但如果Menu被抽离到路由上下文外的组件（如全局弹窗、独立于路由树的组件），则无法获取路由上下文，此时需要将组件移至路由树内，或改用Navigate组件实现跳转。

3. 阻止默认事件（若存在） #

如果点击的元素是原生a标签（哪怕移除了Link但保留了原生a标签），需阻止浏览器默认跳转行为，避免覆盖React Router的导航逻辑：

const navigate = useNavigate();
const handleLoginClick = (e) => {
  e.preventDefault(); // 阻止原生a标签的默认跳转
  navigate("/login");
};

// 元素使用示例
<a href="/login" onClick={handleLoginClick}>登录</a>

4. 验证React Router版本及导入路径 #

确保useNavigate从react-router-dom正确导入（该Hook从React Router v6开始提供）：

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

你的路由配置使用了v6的Routes和Route语法，需确认项目安装的是React Router v6版本，避免版本不兼容。

5. 检查路由匹配后的组件逻辑 #

/login路由绑定的是<Main />组件，检查Main组件是否存在自动重定向、内容隐藏等逻辑，导致看起来导航未生效但实际路由已变化。可以在浏览器控制台查看window.location.pathname是否在点击后变为/login，区分是导航未触发还是组件渲染问题。

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