Function createContext

Creates a type-safe RouterContext object that can be used to store and retrieve arbitrary values in actions, loaders, and middleware. Similar to React's createContext, but specifically designed for React Router's request/response lifecycle.

If a defaultValue is provided, it will be returned from context.get() when no value has been set for the context. Otherwise, reading this context when no value has been set will throw an error.

import { createContext } from "react-router";

// Create a context for user data
export const userContext =
  createContext<User | null>(null);
Copy

import { getUserFromSession } from "~/auth.server";
import { userContext } from "~/context";

export const authMiddleware = async ({
  context,
  request,
}) => {
  const user = await getUserFromSession(request);
  context.set(userContext, user);
};
Copy

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 };
}
Copy