React Router Dom V6中如何让侧边栏组件避免重复渲染

云上老周

2026-8-15

解决方案

核心思路是用布局组件拆分公共导航和受保护路由的侧边栏，让Sidebar作为受保护路由的父级组件存在，这样切换子路由时不会重复渲染，同时自动替换Navbar的显示逻辑。

1. 创建两个布局组件

分别处理公共页面（带Navbar）和受保护页面（带Sidebar）的布局：

// 公共页面布局：包含Navbar
function PublicLayout({ children }) {
  return (
    <div>
      <Navbar />
      {children}
    </div>
  );
}

// 受保护页面布局：包含Sidebar，子路由内容放在主区域
function ProtectedLayout({ children }) {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1">
        {children}
      </main>
    </div>
  );
}

2. 重构路由结构

将公共路由嵌套在PublicLayout下，受保护路由先通过ProtectedRoute验证，再嵌套在ProtectedLayout下：

<div className="flex flex-col">
  <BrowserRouter>
    <Routes>
      {/* 公共页面组：自动显示Navbar */}
      <Route element={<PublicLayout />}>
        <Route path='/' element={<Home />} />
        <Route path='/sign-in' element={<Signin />} />
        <Route path='/sign-up' element={<Signup />} />
        <Route path='/contact' element={<Contact />} />
        <Route path='/about' element={<About />} />
        <Route path='*' element={<p>There is nothing here: 404!</p>} />
      </Route>

      {/* 受保护页面组：先验证权限，再显示Sidebar */}
      <Route element={<ProtectedRoute />}>
        <Route element={<ProtectedLayout />}>
          <Route path='/dashboard' element={<Dashboard />} />
          <Route path='/chat' element={<Chat />} />
        </Route>
      </Route>
    </Routes>
  </BrowserRouter>
</div>

效果说明

访问公共路由（如/、/sign-in）时，自动渲染Navbar，不显示Sidebar；
访问受保护路由（如/dashboard、/chat）时，先经过ProtectedRoute的权限校验，通过后渲染Sidebar，且切换这两个路由时，Sidebar作为父组件不会重新渲染，只有子页面（Dashboard/Chat）更新；
无需在每个受保护页面手动添加Sidebar，避免重复渲染和代码冗余。