React Router v6 布局嵌套：实现带侧边栏的条件渲染与路由结构优化

本文详解如何在 react router v6 中通过嵌套路由（``）和布局组件（layout）实现「部分页面共享 sidebar，认证页完全独立」的路由结构，避免空白页、重复渲染与逻辑混乱。

在 React Router v6 中，布局复用不再依赖手动条件判断或多层 嵌套，而是通过 + 嵌套路由配置 实现声明式布局分发。核心原则是：将共享 UI（如 SideBar）提取为 Layout 组件，并仅对需要该布局的路由路径进行包裹。

✅ 正确结构：分离认证与应用主流程

首先，App.js 应作为路由根容器，清晰区分两类路由：

• 根路径 / 专用于 （无任何布局）；
• 另一组路径（如 /list、/detail）需统一包裹在 内，由其提供 Sidebar 和 占位。

// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    
      
        {/* 独立认证页：不经过 Layout */}
        } />

        {/* 主应用区域：所有子路由共用 Layout */}
        }>
          } />           {/* /app → 默认显示 List */}
          } />
          } />
        
      
    
  );
}

export default App;

? 关键点： 使用 path="/app" 作为布局入口，避免 / 被重复占用； 让 /app 自动匹配默认子路由（更语义化，优于空路径）； 所有 element={} 的父路由必须包含 ，否则子组件无法渲染。

? Layout 组件：注入共享结构与 Outlet

Layout.js 是布局中枢，负责渲染固定 UI（如 Sidebar）并预留内容插槽：

// Layout.js
import { Outlet } from 'react-router-dom';

export function Layout() {
  return (
    

      
      

         {/* 子路由组件（List/Detail）将在此处渲染 */}
      
    
  );
}

⚠️ 注意事项：

Figma

Figma 是一款基于云端的 UI 设计工具，可以在线进行产品原型、设计、评审、交付等工作。

下载

• 必须存在于 Layout 的 element 中，否则嵌套路由失效；
• 不要在 Layout 外部额外渲染 —— 嵌套路由已由父 的 element 属性隐式管理；
• 若希望 /app 重定向到 /app/list，可在 App.js 中添加 gate to="list" replace />} />。

? 为什么原方案失败？

• ❌ 原 App.js 中 直接写在 外层 → 导致所有路由（包括 /）都强制渲染 Sidebar；
• ❌ Container.js 中未使用 ，且 /app 路径无对应子路由 → 浏览器访问 /app 时匹配到空 ，呈现空白；
• ❌ 路由优先级未明确：多个 / 路径冲突，React Router v6 严格按顺序匹配，首条匹配即终止。

✅ 最终效果与推荐实践

? 进阶建议：

• 将 Layout 抽离为可复用高阶组件（如 AuthLayout、AdminLayout），支持多层级嵌套；
• 结合 useNavigate 和 useLocation 在 Layout 中动态控制 sidebar 显示逻辑（如折叠状态持久化）；
• 使用 createBrowserRouter（V6.4+）替代 ，提升服务端渲染兼容性与类型安全。

通过合理运用嵌套路由与 ，你不仅能精准控制 UI 复用范围，还能让路由配置具备更强的可维护性与可扩展性。