Outlets

Verschachteltes Routing bedeutet, dass Routen innerhalb anderer Routen verschachtelt werden können, einschließlich der Art und Weise, wie sie gerendert werden. Wie sagen wir also unseren Routen, wo dieser verschachtelte Inhalt gerendert werden soll?

Die Outlet Komponente wird verwendet, um die nächste potenziell passende untergeordnete Route zu rendern. <Outlet /> nimmt keine Props entgegen und kann überall im Komponentenbaum einer Route gerendert werden. Wenn keine passende untergeordnete Route vorhanden ist, rendert <Outlet /> null.

Ein großartiges Beispiel ist die Konfiguration der Root-Route Ihrer Anwendung. Geben wir unserer Root-Route eine Komponente, die einen Titel rendert, gefolgt von einer <Outlet /> für unsere Top-Level-Routen zum Rendern.

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>
  )
}