React Router v6 嵌套路由失效的根源与解决方案

React Router v6 中嵌套路由无法渲染，通常是因为父路由组件未正确使用 组件占位；若父组件不渲染 Outlet，子路由的 element 将无处挂载，导致页面空白或回退到上级布局。

react router v6 中嵌套路由无法渲染，通常是因为父路由组件未正确使用 `` 组件占位；若父组件不渲染 outlet，子路由的 `element` 将无处挂载，导致页面空白或回退到上级布局。

在 React Router v6 中，嵌套路由（Nested Routes）的设计理念是布局复用与内容插槽化：父路由定义共享 UI 结构（如标题、导航栏、表单容器），子路由则通过 注入具体内容。这与 v5 的 Switch + Route 嵌套逻辑有本质区别——v6 不再隐式渲染子路由，而是强制要求显式声明“内容插入点”。

你当前代码中，/auth 路由配置了子路径 new-user：

<Route path="/auth" element={<Login />}>
  <Route path="new-user" element={<CreateUser />} />
</Route>

该配置语义明确：当访问 /auth/new-user 时，应渲染 作为布局，并在其内部渲染 。但问题在于——Login 组件内部没有 ，因此 CreateUser 无处渲染，整个子路由链被静默忽略。

✅ 正确做法：在 Login.tsx 中导入并渲染 ：

笔灵降AI

论文降AI神器，适配知网及维普！一键降至安全线，100%保留原文格式；无口语化问题，文风更学术，降后字数控制最佳！

下载

import { Outlet, Link, useNavigate } from "react-router-dom"; // ✅ 添加 Outlet 导入

const Login = () => {
  // ... 状态与逻辑保持不变

  return (
    <>
      <Title />
      <div className={styles.loginForm}>
        <h2>Login</h2>
        <form onSubmit={handleSubmit}>
          {/* 表单字段保持不变 */}
        </form>
        <Link to="new-user">Create New User</Link>
      </div>
      <Outlet /> {/* ✅ 关键：为子路由预留渲染位置 */}
    </>
  );
};

export default Login;

⚠️ 注意事项：

• 必须出现在父组件的 JSX 中，且位置决定子组件渲染区域（例如放在表单下方，CreateUser 就会显示在登录表单之后）；
• to 属性使用相对路径（如 "new-user"）时，会基于当前路由层级解析；若需跳转到绝对路径，应写为 "/auth/new-user"；
• 若 Login 本身不应作为布局（即你希望 /auth 和 /auth/new-user 是两个完全独立的全页视图），则应改用布局路由（Layout Route）模式——将 /auth 设为仅含 的空布局，再把 Login 和 CreateUser 作为其子路由：

// 推荐用于真正分离的页面场景
<Route path="/auth">
  <Route index element={<Login />} />           {/* 访问 /auth 时渲染 Login */}
  <Route path="new-user" element={<CreateUser />} /> {/* 访问 /auth/new-user 时渲染 CreateUser */}
</Route>

此时 /auth 路由默认提供内置 ，无需额外编写布局组件，语义更清晰，也避免了 Login 组件承担非职责范围的布局职责。

? 总结：React Router v6 的嵌套路由不是“自动继承”，而是“显式委托”。每一次父子关系都必须由父组件主动调用 来承接子内容。遗漏它，就是中断渲染链的最常见原因。检查你的所有父级路由组件——只要它声明了子路由，就务必确认其 JSX 中存在 。