アウトレット

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