unstable_createContext

此 API 是实验性的，可能会在次要/补丁版本中发生重大更改。请谨慎使用，并密切关注相关更改的发行说明。

摘要

创建一个类型安全的 unstable_RouterContext 对象，可用于在 action、loader 和中间件中存储和检索任意值。类似于 React 的 createContext，但专为 React Router 的请求/响应生命周期设计。

如果提供了 defaultValue，当上下文中没有设置任何值时，context.get() 将返回该默认值。否则，在没有设置值的情况下读取此上下文将抛出错误。

import { unstable_createContext } from "react-router";

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

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

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

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

签名

function unstable_createContext<T>(
  defaultValue?: T,
): unstable_RouterContext<T>

参数

defaultValue

上下文的可选默认值。如果此上下文没有设置任何值，则返回该值。

一个 unstable_RouterContext 对象，可以在 action、loader 和中间件中与 context.get() 和 context.set() 一起使用。