react-router-dom编程式导航不生效：表单提交后跳转失败排查

以下是几种常见的导致navigate('/admin/success')未生效的原因及修复方向：

1. 嵌套路由的index配置错误 #

你当前的路由配置中，add-article被设为index路由，但index路由的path字段应该留空，用来指定父路由默认渲染的子组件。当前配置会导致路由匹配逻辑异常：

// 错误配置
<Route path="/admin" element={<AdminLayout />}>
    <Route index path="add-article" element={<AddArticleForm />} />
    <Route path="success" element={<Success />} />
</Route>

正确配置二选一：

// 方案1：通过 /admin/add-article 访问表单
<Route path="/admin" element={<AdminLayout />}>
    <Route path="add-article" element={<AddArticleForm />} />
    <Route path="success" element={<Success />} />
</Route>

// 方案2：/admin 默认显示表单，/admin/success 显示成功页
<Route path="/admin" element={<AdminLayout />}>
    <Route index element={<AddArticleForm />} />
    <Route path="success" element={<Success />} />
</Route>

路由匹配规则错误会直接导致导航无法触发页面切换。

2. AdminLayout 未渲染 Outlet 组件 #

嵌套路由的父组件（AdminLayout）必须包含<Outlet />，否则子路由的内容无法被渲染，即使导航成功，页面也不会有变化（看起来像没跳转）。

确保AdminLayout里有这段代码：

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

const AdminLayout = () => {
  return (
    <div>
      {/* 你的布局头部/侧边栏等内容 */}
      <Outlet /> {/* 子路由组件会渲染在这里 */}
    </div>
  );
};

3. 响应判断逻辑存在漏洞 #

fetch不会在服务器返回4xx/5xx状态码时抛出异常，只会返回ok: false的响应对象。你当前用if (response)判断，哪怕接口返回错误，response依然存在，代码会执行navigate，但如果路由本身有问题就不会生效。

建议结合响应状态和业务标识判断：

// 假设后端返回 { success: true } 表示业务处理成功
if (request.ok && response.success) {
  console.log(response);
  navigate('/admin/success');
}

4. 组件未处于 Router 上下文内 #

如果AddArticleForm所在的组件树没有被<BrowserRouter>（或其他Router组件）包裹，useNavigate返回的函数不会生效。检查入口文件的结构：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/admin" element={<AdminLayout />}>
          {/* 子路由配置 */}
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

5. 异步逻辑中的隐藏错误 #

虽然你调用了event.preventDefault()，但如果handleSubmit的异步代码里有未被捕获的错误，可能会打断导航逻辑。可以在navigate后添加return，同时检查浏览器控制台是否有未输出的错误：

if (request.ok && response.success) {
  console.log(response);
  navigate('/admin/success');
  return; // 终止后续逻辑，避免干扰
}

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