【React】Outlet に context を渡す方法

はじめに

こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。

実は <Outlet /> に context として値を渡せること、知っていますか？

私は最近まで知らなくて、子コンポーネントごとに グローバルステートを呼び出していました。
でも Outlet を使えば、親レイアウトから子ルートにスマートに値を渡せます。

今回はその方法をシンプルにまとめてみます。

---

親コンポーネント（渡す側）

// 親コンポーネント
import { Outlet } from "react-router-dom";

export function Layout() {
  const user = { role: "student" };

  return (
    <div>
      <h1>共通レイアウト</h1>
      {/* ここで context を渡す */}
      <Outlet context={{ role: user.role }} />
    </div>
  );
}

---

子コンポーネント（受け取る側）

子では useOutletContext フックを使います。
型をつけておくと TypeScript 的にも安心です。

import { useOutletContext } from "react-router-dom";

type ContextType = {
  role: string;
};

export function StudentPage() {
  const { role } = useOutletContext<ContextType>();

  return <div>Role: {role}</div>;
}

---

まとめ

• 親 → <Outlet context={{ 任意の値 }} />
• 子 → useOutletContext<型>() で受け取れる