createContext

Summary

action、loader、および middleware で任意の値を保存および取得するために使用できる、型安全な RouterContext オブジェクトを作成します。React の createContext と似ていますが、React Router のリクエスト/レスポンスライフサイクル用に特別に設計されています。

defaultValue が提供された場合、context に値が設定されていないときに context.get() から返されます。そうでない場合、値が設定されていないこの context を読み取るとエラーがスローされます。

app/context.ts

import { createContext } from "react-router";
 
// ユーザーデータの context を作成
export const userContext =
  createContext<User | null>(null);

app/middleware/auth.ts

import { getUserFromSession } from "~/auth.server";
import { userContext } from "~/context";
 
export const authMiddleware = async ({
  context,
  request,
}) => {
  const user = await getUserFromSession(request);
  context.set(userContext, user);
};

app/routes/profile.tsx

import { userContext } from "~/context";
 
export async function loader({
  context,
}: Route.LoaderArgs) {
  const user = context.get(userContext);
 
  if (!user) {
    throw new Response("Unauthorized", { status: 401 });
  }
 
  return { user };
}

Signature

function createContext<T>(defaultValue?: T): RouterContext<T>

Params

defaultValue

context のオプションのデフォルト値です。この値は、context に値が設定されていない場合に返されます。

Returns

action、loader、および middleware で context.get() および context.set() とともに使用できる RouterContext オブジェクトです。

Summary
Signature
Params
defaultValue
Returns