ルーターこのページを編集

アウトレット

アウトレットは、ファイルシステムベースのルーターが提供する強力な機能です。これを使用することで、ネストされたレイアウトを作成したり、アプリ内でコンポーネントを再利用したりできます。レイアウトにアウトレットを追加するには、@で始まる名前のサブディレクトリにルートを定義します。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.jsx
export default function Sidebar() { return <aside>...</aside>; }

クライアントサイドナビゲーションでアウトレットを利用するには、@lazarv/react-server/navigationモジュールが提供するReact Server Componentコンポーネントを使用します。ファイルシステムベースのルーターを使用する場合は、各アウトレットのサーバサイドレンダリングが自動的に処理されます。同じモジュールのLinkコンポーネントとRefreshコンポーネントを使うことで、アウトレットを活用する際のアプリのナビゲーションをより細かく制御できます。レイアウトコンポーネントのpropsとして利用できるアウトレットによる初期コンテンツと、React Server Componentコンポーネントによるクライアントサイドナビゲーションを組み合わせることで、アプリに強力なナビゲーションシステムを構築できます。

(main).layout.jsx
import { ReactServerComponent } from "@lazarv/react-server/navigation"; export default function RootLayout({ sidebar, children }) { return ( <main> <ReactServerComponent outlet="sidebar"> {sidebar} </ReactServerComponent> {children} </main> ); }

アウトレットを使用した例を確認するには、チュートリアルのPhotoセクションをご覧ください。