docs/src/pages/ja/(pages)/router/outlets.mdxmdx3.9 KiBec5eba3e

title: アウトレット category: Router order: 4

import Link from "../../../../components/Link.jsx";

アウトレット

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

export default function Sidebar() {
  return <aside>...</aside>;
}

<Link name="client-side-navigation"> ## クライアントサイドナビゲーション </Link>

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

import { ReactServerComponent } from "@lazarv/react-server/navigation";

export default function RootLayout({ sidebar, children }) {
  return (
    <main>
      <ReactServerComponent outlet="sidebar">
        {sidebar}
      </ReactServerComponent>
      {children}
    </main>
  );
}

ファイルシステムベースのルーターを使用している場合、ランタイムは仮想的な@lazarv/react-server/outletsモジュールも生成します。このモジュールは、宣言された各アウトレットに対して、型付きurl・文字列指定不要のアウトレット名・初期描画でのSSRコンテンツを備えた、型付きでサーバープリロードされるバインド済みのReactServerComponentを公開します。詳細は型付きアウトレットコンポーネントを参照してください。

import { sidebar } from "@lazarv/react-server/outlets";

<sidebar.Outlet url="/dashboard/nav" />

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