React Router v7 ドキュメント 日本語版

English

Outlet

概要

リファレンスドキュメント ↗

親ルートにマッチする子ルートをレンダリングします。子ルートがマッチしない場合は何もレンダリングしません。

import { Outlet } from "react-router";
 
export default function SomeParent() {
  return (
    <div>
      <h1>親コンテンツ</h1>
      <Outlet />
    </div>
  );
}

シグネチャ

function Outlet(props: OutletProps): React.ReactElement | null

Props

context

Outlet の下の要素ツリーにコンテキスト値を提供します。親ルートが子ルートに値を提供する必要がある場合に使用します。

<Outlet context={myContextValue} />

コンテキストには useOutletContext でアクセスします。