React Router 中间件上下文初始化最佳实践

在React Router v7.3.0版本中，中间件API引入了一个强大的新特性——上下文(Context)系统。这个系统允许开发者在请求处理管道中共享数据和状态，但很多开发者在初次使用时可能会遇到"Error: No value found for context"的错误。

上下文系统的基本概念

React Router的上下文系统类似于React的Context API，但专门为服务器端路由设计。它通过unstable_createContext函数创建上下文实例，然后可以在中间件中使用context.get和context.set来访问和修改上下文值。

常见错误场景

当开发者尝试在中间件中访问一个尚未初始化的上下文时，系统会抛出"No value found for context"错误。这与React Context的行为不同，React Context会返回默认值(如果有的话)，而React Router的上下文系统则要求显式初始化。

解决方案

1. 预初始化上下文

最佳实践是在创建请求处理器时就初始化所有可能用到的上下文。例如：

const handler = createRequestHandler(
  () => import("virtual:react-router/server-build"),
  import.meta.env.MODE
);

export default {
  async fetch(request, env, ctx) {
    const contextMap = new Map();
    
    // 预初始化所有上下文
    contextMap.set(authServerContext, createAuthServer());
    contextMap.set(appContext, await createAppContext(request, env, ctx));
    
    return handler(request, contextMap);
  }
};

2. 使用默认值模式

如果某些上下文需要延迟初始化，可以采用默认值模式：

const UNINITIALIZED = Symbol();
export const authServerContext = unstable_createContext<AuthServer>(UNINITIALIZED);

// 在中间件中
const authServer = context.get(authServerContext);
if (authServer === UNINITIALIZED) {
  const app = context.get(appContext);
  context.set(authServerContext, createAuthServer(app));
}

3. 空值检查模式

对于可能为空的上下文，可以使用null或undefined作为初始值：

export const authServerContext = unstable_createContext<AuthServer | null>(null);

// 在中间件中
let authServer = context.get(authServerContext);
if (!authServer) {
  authServer = createAuthServer(context.get(appContext));
  context.set(authServerContext, authServer);
}

设计考量

React Router选择在访问未初始化上下文时抛出错误，而不是返回undefined，这是为了帮助开发者尽早发现可能的逻辑错误。在服务器端处理中，明确的数据流比隐式的默认值更有价值。

性能优化建议

对于高频访问的上下文，建议在请求处理的最初阶段就进行初始化，避免在中间件中重复检查和初始化带来的性能开销。

通过遵循这些模式，开发者可以充分利用React Router强大的中间件上下文系统，同时避免常见的初始化错误。