React Academy · 课时

嵌套路由与 Outlet 布局

Q: 「嵌套路由与 Outlet 布局」这节课中我会学到什么？

使用嵌套的 和 组件构建多层级路由布局。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用嵌套的和组件构建多层级路由布局。

嵌套路由与 Outlet 布局 是 CoddyKit 上的免费 React Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

什么是嵌套路由

React Router v6 中的嵌套路由可以组合布局：父路由渲染一个外壳（导航栏、侧边栏），子路由通过 <Outlet /> 填充内容区域。

定义嵌套路由

在路由配置中，将子 <Route> 元素放置在父 <Route> 内部。父路径是所有子路径的前缀。

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'settings', element: <Settings /> },
    ],
  },
]);

Outlet 组件

<Outlet /> 是父布局组件中的占位符。React Router 会将它替换为匹配的子路由元素。

function RootLayout() {
  return (
    <div>
      <nav>
        <Link to="/dashboard">Dashboard</Link>
        <Link to="/settings">Settings</Link>
      </nav>
      <main>
        <Outlet /> {/* child route renders here */}
      </main>
    </div>
  );
}

索引路由

当父级 URL 完全匹配时，会渲染 index: true 路由；当没有其他子路径匹配时，它会作为默认子路由。

{
  path: '/',
  element: <RootLayout />,
  children: [
    { index: true, element: <Home /> }, // renders at '/'
    { path: 'about', element: <About /> },
  ],
}

多级嵌套

路由可以嵌套多层。链中的每个布局组件都会为自己的子路由渲染一个 <Outlet />。

const router = createBrowserRouter([
  {
    path: '/app',
    element: <AppShell />,
    children: [
      {
        path: 'users',
        element: <UsersLayout />,
        children: [
          { index: true, element: <UserList /> },
          { path: ':id', element: <UserDetail /> },
        ],
      },
    ],
  },
]);

Outlet 上下文

您可以通过 <Outlet /> 的 context 属性，将数据从布局传递给嵌套的子路由，并在子路由中使用 useOutletContext() 读取数据。

// Parent layout
function UsersLayout() {
  const [selected, setSelected] = useState(null);
  return <Outlet context={{ selected, setSelected }} />;
}

// Child route
function UserDetail() {
  const { selected } = useOutletContext();
  return <div>{selected}</div>;
}

使用无路径路由定义命名布局

不带 path 的路由只为布局包裹子路由，不会添加 URL 片段。它适合将路由归入共享布局下。

{
  element: <AuthenticatedLayout />, // no path
  children: [
    { path: '/profile', element: <Profile /> },
    { path: '/billing', element: <Billing /> },
  ],
}

嵌套路由中的相对链接

在嵌套路由中，<Link to='sibling'> 会相对于当前路由的路径进行解析，就像 HTML 中的相对 URL 一样。

// Inside /app/users — link goes to /app/users/new
function UserList() {
  return <Link to="new">Add User</Link>;
}

嵌套路由中的 useMatch

当当前 URL 与模式匹配时，useMatch(pattern) 会返回匹配数据，适合用于在嵌套布局中设置活动链接的样式。

function NavLink({ to, children }) {
  const match = useMatch(to);
  return (
    <Link to={to} className={match ? 'active' : ''}>
      {children}
    </Link>
  );
}

按分段设置错误边界

您可以向任意嵌套路由添加 errorElement，仅捕获该分段中的错误，而不会导致整个布局外壳崩溃。

{
  path: 'users',
  element: <UsersLayout />,
  errorElement: <UsersError />,
  children: [
    { path: ':id', element: <UserDetail /> },
  ],
}

实用模式：仪表板布局

典型的仪表板会使用顶层路由作为应用外壳（页眉和侧边栏），并为每个分区使用嵌套路由。这样可以保持外壳处于挂载状态，只更新内容区域。

function DashboardShell() {
  return (
    <div className="dashboard">
      <Sidebar />
      <div className="content">
        <Outlet />
      </div>
    </div>
  );
}

快速检查

父布局必须渲染哪个组件，才能显示其匹配的子路由？

回顾

嵌套路由让父路由渲染持久布局，而子路由填充 <Outlet />。请使用索引路由定义默认子路由，使用无路径路由定义共享布局，并使用 useOutletContext 向下传递数据。

常见问题解答

「嵌套路由与 Outlet 布局」课时是免费的吗？

是的 — 「嵌套路由与 Outlet 布局」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「嵌套路由与 Outlet 布局」这节课中我会学到什么？

使用嵌套的和组件构建多层级路由布局。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「嵌套路由与 Outlet 布局」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy