アウトレット
アウトレットは、ファイルシステムベースのルーターが提供する強力な機能です。これを使用することで、ネストされたレイアウトを作成したり、アプリ内でコンポーネントを再利用したりできます。レイアウトにアウトレットを追加するには、@
で始まる名前のサブディレクトリにルートを定義します。URLがアウトレットディレクトリ内のルートと一致すると、そのルート定義ファイルからエクスポートされたコンポーネントが、Reactのpropsとしてレイアウトコンポーネントに渡されます。
レイアウトにアウトレットを追加するには、@
で始まる名前のサブディレクトリにルートを定義します。URLがアウトレットディレクトリ内のルートと一致した場合、そのルート定義ファイルからエクスポートされたコンポーネントがReactのpropsとしてレイアウトコンポーネントに渡されます。
src
- (main).layout.jsx
- (main).page.jsx
- @sidebar
- (sidebar).page.jsx
// (main).layout.jsx
export default function RootLayout({ sidebar, children }) {
return (
<main>
{sidebar}
{children}
</main>
);
}
@sidebar/(sidebar).page.jsxexport default function Sidebar() {
return <aside>...</aside>;
}
クライアントサイドナビゲーションでアウトレットを利用するには、@lazarv/react-server/navigation
モジュールが提供するReact Server Component
コンポーネントを使用します。ファイルシステムベースのルーターを使用する場合は、各アウトレットのサーバサイドレンダリングが自動的に処理されます。同じモジュールのLinkコンポーネントとRefreshコンポーネントを使うことで、アウトレットを活用する際のアプリのナビゲーションをより細かく制御できます。レイアウトコンポーネントのpropsとして利用できるアウトレットによる初期コンテンツと、React Server Component
コンポーネントによるクライアントサイドナビゲーションを組み合わせることで、アプリに強力なナビゲーションシステムを構築できます。
(main).layout.jsximport { ReactServerComponent } from "@lazarv/react-server/navigation";
export default function RootLayout({ sidebar, children }) {
return (
<main>
<ReactServerComponent outlet="sidebar">
{sidebar}
</ReactServerComponent>
{children}
</main>
);
}
アウトレットを使用した例を確認するには、チュートリアルのPhotoセクションをご覧ください。