Outlet | TanStack Router Solid 文档

Outlets

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

Outlet 组件

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

提示

如果路由的 component 未定义，它将自动渲染一个 ``。

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

tsx

import { createRootRoute, Outlet } from '@tanstack/solid-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/solid-router'

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

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

Outlets

Outlet 组件

订阅 Bytes

订阅 Bytes