本文详解如何在 react router v6 中通过嵌套路由（`
在 React Router v6 中，布局复用不再依赖手动条件判断或多层 <Routes> 嵌套，而是通过 <Outlet> + 嵌套路由配置 实现声明式布局分发。核心原则是：将共享 UI（如 SideBar）提取为 Layout 组件，并仅对需要该布局的路由路径进行包裹。
✅ 正确结构：分离认证与应用主流程
首先，App.js 应作为路由根容器，清晰区分两类路由：
- 根路径 / 专用于 <Authentication />（无任何布局）；
- 另一组路径（如 /list、/detail）需统一包裹在 <Layout /> 内，由其提供 Sidebar 和 <Outlet> 占位。
// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
{/* 独立认证页：不经过 Layout */}
<Route path="/" element={<Authentication />} />
{/* 主应用区域：所有子路由共用 Layout */}
<Route path="/app" element={<Layout />}>
<Route index element={<List />} /> {/* /app → 默认显示 List */}
<Route path="list" element={<List />} />
<Route path="detail" element={<Detail />} />
</Route>
</Routes>
</BrowserRouter>
);
}
export default App;? 关键点： 使用 path="/app" 作为布局入口，避免 / 被重复占用； <Route index> 让 /app 自动匹配默认子路由（更语义化，优于空路径）； 所有 element={<Layout />} 的父路由必须包含 <Outlet />，否则子组件无法渲染。
? Layout 组件：注入共享结构与 Outlet
Layout.js 是布局中枢，负责渲染固定 UI（如 Sidebar）并预留内容插槽：
// Layout.js
import { Outlet } from 'react-router-dom';
export function Layout() {
return (
<div className="app-layout">
<aside className="sidebar">
<Sidebar /> {/* 你的侧边栏组件 */}
</aside>
<main className="content">
<Outlet /> {/* 子路由组件（List/Detail）将在此处渲染 */}
</main>
</div>
);
}⚠️ 注意事项：
- <Outlet /> 必须存在于 Layout 的 element 中，否则嵌套路由失效；
- 不要在 Layout 外部额外渲染 <Routes> —— 嵌套路由已由父 <Route> 的 element 属性隐式管理；
- 若希望 /app 重定向到 /app/list，可在 App.js 中添加 <Route path="/app" element={<Navigate to="list" replace />} />。
? 为什么原方案失败？
- ❌ 原 App.js 中 <SideBar/> 直接写在 <Routes> 外层 → 导致所有路由（包括 /）都强制渲染 Sidebar；
- ❌ Container.js 中未使用 <Outlet>，且 /app 路径无对应子路由 → 浏览器访问 /app 时匹配到空 <Routes>，呈现空白；
- ❌ 路由优先级未明确：多个 / 路径冲突，React Router v6 严格按顺序匹配，首条匹配即终止。
✅ 最终效果与推荐实践
| URL | 渲染内容 |
|---|---|
| / | 仅 <Authentication /> |
| /app 或 /app/list | <Sidebar /> + <List /> |
| /app/detail | <Sidebar /> + <Detail /> |
? 进阶建议：
- 将 Layout 抽离为可复用高阶组件（如 AuthLayout、AdminLayout），支持多层级嵌套；
- 结合 useNavigate 和 useLocation 在 Layout 中动态控制 sidebar 显示逻辑（如折叠状态持久化）；
- 使用 createBrowserRouter（V6.4+）替代 <BrowserRouter>，提升服务端渲染兼容性与类型安全。
通过合理运用嵌套路由与 <Outlet>，你不仅能精准控制 UI 复用范围，还能让路由配置具备更强的可维护性与可扩展性。
