Outlet

중첩 라우팅에서는 라우트를 다른 라우트 안에 중첩할 수 있으며 렌더링 방식도 중첩됩니다. 그렇다면 라우트에 이 중첩 콘텐츠를 어디에 렌더링할지 어떻게 알려줄까요?

Outlet 컴포넌트

Outlet 컴포넌트는 다음으로 매칭될 가능성이 있는 자식 라우트를 렌더링하는 데 사용합니다. <Outlet />은 props를 받지 않으며 라우트의 컴포넌트 트리 어디서든 렌더링할 수 있습니다. 매칭되는 자식 라우트가 없으면 <Outlet />은 null을 렌더링합니다.

[!TIP] 라우트의 component를 정의하지 않으면 자동으로 <Outlet />을 렌더링합니다.

애플리케이션의 루트 라우트를 구성하는 것이 좋은 예입니다. 제목을 렌더링하는 컴포넌트를 루트 라우트에 지정하고, 최상위 라우트가 렌더링될 <Outlet />을 이어서 추가해 보겠습니다.

React

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

Solid

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