插槽 | TanStack Router React 文档

插槽

嵌套路由意味着路由可以嵌套在其他路由中，包括它们的渲染方式。那么我们如何告诉路由在哪里渲染这些嵌套内容呢？

`Outlet` 组件

Outlet 组件用于渲染下一个可能匹配的子路由。 <Outlet /> 不接受任何 props，并且可以在路由组件树中的任何位置渲染。如果没有匹配的子路由，<Outlet /> 将渲染 null。

提示

如果路由的 component 未定义，它将自动渲染一个 <Outlet />。

一个很好的例子是配置应用程序的根路由。让我们给根路由一个组件，该组件渲染一个标题，然后是一个 <Outlet />，用于渲染我们的顶层路由。

tsx

import { createRootRoute, Outlet } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: RootComponent,
})

function RootComponent() {
  return (
    <div>
      <h1>My App</h1>
      <Outlet /> {/* This is where child routes will render */}
    </div>
  )
}

import { createRootRoute, Outlet } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: RootComponent,
})

function RootComponent() {
  return (
    <div>
      <h1>My App</h1>
      <Outlet /> {/* This is where child routes will render */}
    </div>
  )
}

插槽

`Outlet` 组件

订阅 Bytes

订阅 Bytes

插槽

Outlet 组件

订阅 Bytes

订阅 Bytes

`Outlet` 组件