Outlets

중첩 라우팅(Nested Routing)은 라우트가 다른 라우트 내에서 중첩될 수 있음을 의미하며, 렌더링 방식에서도 이를 포함합니다. 그렇다면 이 중첩된 콘텐츠를 어디에 렌더링할지 라우트에 어떻게 알려줄까요?

The Outlet Component

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

[!TIP]
라우트의 component가 정의되지 않은 경우, 라우트는 자동으로 <Outlet />을 렌더링합니다.

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

import { createRootRoute } from "@tanstack/react-router";
 
export const Route = createRootRoute({
  component: RootComponent,
});
 
function RootComponent() {
  return (
    <div>
      <h1>My App</h1>
      <Outlet /> {/* 이곳에 자식 라우트가 렌더링됩니다 */}
    </div>
  );
}