React Router v6中如何保留侧边栏与右侧内容并实现嵌套路由？

问题场景 #

需要实现左侧固定侧边栏，右侧展示卡片列表；点击卡片后，右侧区域切换为Note组件，同时左侧侧边栏保持显示。现有路由代码如下：

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "notes/:id",
        element: <Note />,
      },
    ],
  },
]);

解决方案 #

核心思路是让App组件作为布局容器，内置侧边栏和React Router的Outlet组件（用来渲染子路由对应的内容）。这样子路由切换时，只会替换Outlet区域的内容，侧边栏始终保留。

1. 修改App组件结构 #

在App组件中拆分出侧边栏和内容区域，用Outlet承载子路由的渲染：

import { Outlet, Link } from "react-router-dom";

function App() {
  return (
    <div style={{ display: "flex", height: "100vh" }}>
      {/* 左侧侧边栏 */}
      <aside style={{ width: "200px", background: "#f0f0f0", padding: "1rem" }}>
        {/* 侧边栏内容，比如导航链接 */}
        <Link to="/">回到卡片列表</Link>
        {/* 其他侧边栏元素 */}
      </aside>

      {/* 右侧内容区域：Outlet会渲染子路由的组件 */}
      <main style={{ flex: 1, padding: "1rem" }}>
        <Outlet />
      </main>
    </div>
  );
}

2. 补充根路由的默认内容 #

当前路由配置中根路径/没有对应的子路由元素，需添加组件展示右侧卡片列表：

// 新增卡片列表组件
function CardList() {
  return (
    <div>
      {/* 示例卡片，用Link跳转到对应Note */}
      <Link to="/notes/1" style={{ display: "block", margin: "1rem 0", padding: "1rem", border: "1px solid #ccc" }}>
        卡片1
      </Link>
      <Link to="/notes/2" style={{ display: "block", margin: "1rem 0", padding: "1rem", border: "1px solid #ccc" }}>
        卡片2
      </Link>
    </div>
  );
}

// 更新路由配置，添加根路径的子路由
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "/", // 根路径默认渲染CardList
        element: <CardList />,
      },
      {
        path: "notes/:id",
        element: <Note />,
      },
    ],
  },
]);

3. Note组件接收路由参数 #

在Note组件中通过useParams获取卡片ID：

import { useParams } from "react-router-dom";

function Note() {
  const { id } = useParams();
  return <div>查看笔记：{id}</div>;
}

这样就能实现点击卡片后，右侧区域切换为Note组件，左侧侧边栏始终保留的效果。

内容的提问来源于stack exchange，提问作者Undisclosed