Nested Routes 嵌套路由
最后更新：2026-10-28
Nested Routes 嵌套路由
嵌套路由把「布局 + 子页面」表达成父子 Route：父 Route 内再写子 Route，父组件里用 Outlet 画一个「坑位」，命中的子路由页面就渲染进坑位。侧边栏固定、内容区切换的典型后台布局全靠它。
| 分组 | 路由与状态管理 |
|---|---|
| 类型 | 组件 |
| 引入版本 | React Router 6.4 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
import { Routes, Route, Outlet } from 'react-router-dom'
function DashboardLayout() {
return (
<div>
<aside>侧边栏（父级固定）</aside>
<main><Outlet /></main> {/* 子路由渲染在这里 */}
</div>
)
}
<Route path="dashboard" element={<DashboardLayout />}>
<Route index element={<Overview />} /> {/* /dashboard 默认子页 */}
<Route path="team" element={<Team />} /> {/* /dashboard/team */}
</Route>⚙️ 参数
| path（父） | 父段路径；子 Route 的 path 会拼接在后面，以 / 开头则按绝对路径处理。 |
|---|---|
| index | 子 Route 的特殊标记：父路径本身（如 /dashboard）没有更多路径段时渲染的默认子页。 |
返回值：无（配置式组件）。父路由渲染自己的 element，其中 Outlet 的位置决定子路由内容出现的位置。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
外框与标题（父布局）始终不变，虚线框内（Outlet 位置）随点击切换子页面——对应父子 Route 嵌套 + Outlet 的渲染结果（模拟演示）。💡 要点
💡 提示 index 路由解决「访问 /dashboard 本身显示什么」：它让父路径也有默认内容，并被父布局的 Outlet 渲染。
ℹ️ 说明 子路径可不写前导斜杠相对拼接（path='team' → /dashboard/team），写 / 则从根算起；相对写法在调整目录层级时更省心。
⚠️ 注意 父组件忘写 Outlet，子路由匹配成功也不会渲染——内容区一片空白是最常见的踩坑现象。
🏷️ 路由与状态管理相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q Outlet 是什么？
A 子路由的渲染占位符。把它想成父组件「挖好的坑」，命中的子 Route 的 element 会填进来，可以层层嵌套多层。
Q 访问父路径 /dashboard 为什么什么都没有？
A 因为没有匹配到任何子路由。给父路由加一个 index 子 Route 提供默认页面即可。
Q 子路由能继续再嵌套吗？
A 可以。Outlet 层层嵌套即可形成任意深度的布局树，每层父级各管各的固定外壳。
