出口 | TanStack Router React Docs

出口

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

Outlet 组件

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

Tip

如果路由的 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>
  )
}