React Router v6 嵌套路由失效的根源与正确实现方案

react router v6 中嵌套路由无法渲染，通常是因为父级路由组件未渲染 ——这是子路由内容的唯一挂载点；缺少它，子路由的 element 将被完全忽略。

react router v6 中嵌套路由无法渲染，通常是因为父级路由组件未渲染 ``——这是子路由内容的唯一挂载点；缺少它，子路由的 `element` 就会被完全忽略。

在 React Router v6 中，嵌套路由（nested routes）的设计哲学是布局驱动（layout-driven）：父路由不再“自动承载”子路由内容，而是必须显式通过 组件声明子路由的渲染位置。这与 v5 的 switch + Route 模式有本质区别——v6 中的嵌套是结构性的，而非隐式继承。

? 问题定位：为什么 /auth/new-user 不渲染？

你当前的路由配置如下：

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

该配置语义上是正确的：/auth/new-user 应匹配到 CreateUser。但关键在于—— 组件内部没有 ，因此即使路由匹配成功， 也无处可渲染，最终页面只显示 Login 的静态内容。

✅ 正确做法：任何作为“布局容器”的父组件（如 Login），只要声明了子路由，就必须在其 JSX 中插入 。

✅ 解决方案一：为 Login 添加

修改 Login.jsx，导入并渲染 （通常放在内容末尾或布局预留区域）：

import React, { useState } from "react"; import {   Link,   Outlet, // ✅ 必须导入   useNavigate } from "react-router-dom"; // ... 其他导入保持不变  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 中，且位置决定子组件的渲染上下文（例如，放在
  内则子组件会嵌入该 div）；

• 使用相对路径（不带 /）才能正确解析为 /auth/new-user；若写成 to=”/new-user” 则跳转至根路径，脱离嵌套上下文。

✅ 解决方案二：改用布局路由（推荐用于通用认证页）

如果你希望 /auth 本身不渲染完整登录页，而是作为纯布局容器（例如统一头部、背景等），更符合 v6 最佳实践的方式是将 Login 降级为索引路由（index）：

const clientRouter = createBrowserRouter(   createRoutesFromElements(     <>       <Route path="/auth">         {/* 自动提供默认 Outlet */}         <Route index element={<Login />} />              {/* 访问 /auth 时渲染 */}         <Route path="new-user" element={<CreateUser />} /> {/* 访问 /auth/new-user 时渲染 */}       </Route>        <Route path="/" element={<RootLayout />} errorElement={<NotFound404 />}>         {/* 其他主应用路由 */}       </Route>     </>   ) );

此时 Login 和 CreateUser 都成为 /auth 布局下的同级子路由，无需手动在 Login 中添加 （因为 本身隐式创建了一个布局路由，自动注入 ）。这种方式更清晰地体现了“布局复用”意图，也避免了组件职责混淆。

? 总结：三个必须牢记的原则

• Outlet 是强制契约：只要定义了子路由，父级组件（或父级路由）就必须提供 渲染位；
• 路径解析是相对的：嵌套路由中 Link.to 和 useNavigate() 应优先使用相对路径（如 “new-user”），除非明确需要脱离当前层级；
• 布局即路由：v6 中“布局组件”应尽可能由专用路由（无 element 的空 ）承担，而非依赖业务组件（如 Login）兼任布局与功能双重角色。

遵循以上原则，嵌套路由将稳定、可预测地工作，并为后续添加加载状态、权限守卫、动画过渡等高级能力打下坚实基础。