如何使用react-router-dom v6渲染带不同布局/元素的组件

架构老林

2026-9-26

问题原因

你当前把<NavBar />和<SideBar />写在了所有路由逻辑的外层，没有做路由匹配判断，所以不管访问什么路径，这两个组件都会被全局渲染。

解决方案

推荐使用React Router v6 嵌套路由+公共布局组件的方式实现布局复用，不需要每个业务页面重复粘贴导航组件代码，实现逻辑如下：

新增公共布局组件Layout，统一存放导航、侧边栏和主内容区结构，用Outlet组件承载子路由的渲染内容：

import { Outlet } from 'react-router-dom'
// 引入你的组件和样式
import NavBar from './components/NavBar'
import SideBar from './components/SideBar'
import styles from './App.module.css'

const Layout = () => {
  return (
    <>
      <NavBar />
      <SideBar />
      <main className={styles["main--container"]}>
        <div className={styles["main--content"]}>
          <Outlet />
        </div>
      </main>
    </>
  )
}

修改App组件的路由配置，登录页单独配置不使用布局，其他需要展示导航的页面都作为Layout的子路由：

const App = () => {
  return (
    <Routes>
      {/* 登录页无导航布局 */}
      <Route path="/login" element={<LoginPage />} />
      {/* 带导航的业务页面统一嵌套在Layout路由下 */}
      <Route element={<Layout />}>
        <Route path="/" element={<Dashboard />} />
        {/* 后续新增页面直接在此处添加子路由即可，无需重复引入导航组件
        <Route path="/settings" element={<Settings />} />
        <Route path="/user/list" element={<UserList />} />
        */}
      </Route>
    </Routes>
  )
}