插槽 | 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