useOutletContext

Summary

Reference Documentation ↗

親ルートの <Outlet context> を返します。

親ルートが、子ルートと共有したい state や他の値を管理することはよくあります。必要であれば独自の context provider を作成することもできますが、これはよくある状況であるため、<Outlet> に組み込まれています。

// Parent route
function Parent() {
  const [count, setCount] = React.useState(0);
  return <Outlet context={[count, setCount]} />;
}

// Child route
import { useOutletContext } from "react-router";
 
function Child() {
  const [count, setCount] = useOutletContext();
  const increment = () => setCount((c) => c + 1);
  return <button onClick={increment}>{count}</button>;
}

TypeScript を使用している場合、親コンポーネントが context の値にアクセスするためのカスタム hook を提供することをお勧めします。これにより、コンシューマーが適切な型付けを得やすくなり、コンシューマーを制御し、誰が context の値を使用しているかを把握しやすくなります。

より現実的な例を次に示します。

src/routes/dashboard.tsx

import { useState } from "react";
import { Outlet, useOutletContext } from "react-router";
 
import type { User } from "./types";
 
type ContextType = { user: User | null };
 
export default function Dashboard() {
  const [user, setUser] = useState<User | null>(null);
 
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet context={{ user } satisfies ContextType} />
    </div>
  );
}
 
export function useUser() {
  return useOutletContext<ContextType>();
}

src/routes/dashboard/messages.tsx

import { useUser } from "../dashboard";
 
export default function DashboardMessages() {
  const { user } = useUser();
  return (
    <div>
      <h2>Messages</h2>
      <p>Hello, {user.name}!</p>
    </div>
  );
}

Signature

function useOutletContext<Context = unknown>(): Context

Returns

親 Outlet コンポーネントに渡された context の値

Summary
Signature
Returns