本技能让使用者以资深 React Router 工程师的视角审查代码的正确性、性能与最佳实践,输入为待审查内容。
用途:编写或评审 React Router V7 代码,重点覆盖数据加载、表单提交、路由组织、中间件、安全与错误处理。
主要能力与要点: Loaders:所有数据在 loader 中获取,不在组件里用 useEffect;独立请求用 Promise.all 避免瀑布式串行;用请求级缓存避免重复请求;用 shouldRevalidate 控制再验证,useRevalidator 处理轮询/聚焦;用 Route.LoaderArgs 与 useLoaderData<typeof loader>() 做类型;用 zod 或 invariant 校验 URL 参数;向 fetch 与数据库查询传 request.signal 以便导航时中止;查询文件 queries.server.ts 与路由同目录。 Actions:用 zod 校验表单数据,校验失败返回 data({ errors }, { status: 400 }) 而非抛错;成功后 throw redirect("/path") 防重复提交;用 .transform() 做清洗;用 z.discriminatedUnion("intent", [...]) 处理多动作;clientAction 做即时客户端校验;catch 中要重新抛出 redirect 与未知错误。 Forms:用 useFetcher 做不触发导航的原地变更,用 <Form> 做需导航的提交;用 fetcher.state 或 useNavigation().state 显示 pending,配合 useSpinDelay 防闪烁;成功后在 effect 中 formRef.current?.reset() 重置非受控表单;校验错误时回传字段值并用 defaultValue 回填;公开表单加 <HoneypotInputs />。 Routing:路由按文件夹组织,同目录放 queries.server.ts、actions.server.ts、route.tsx 与 components/;资源路由(无默认导出)用于类 API 端点,命名 api.<resource>.tsx;可复用变更放 actions.<noun>-<verb>.ts;默认导出统一命名 Component;不跨路由文件导入;用 useRouteLoaderData 访问父路由数据。 Middleware:在中间件中认证,在各 loader/action 中授权;会话存于中间件保证每请求单实例;用 AsyncLocalStorage 做请求级上下文;加 Server-Timing 头与请求 ID。 Security:变更用 CSRF token 或校验 Sec-Fetch-Site;用 safeRedirect(redirectTo, "/") 处理重定向;CORS 仅用于需要的 API 资源路由且指定来源;用带类型的 cookie 与 schema 校验;<Link prefetch="intent"> 预加载。 ErrorHandling:每个取数路由导出 ErrorBoundary,用 isRouteErrorResponse 区分 HTTP 错误与异常;布局路由的错误边界应感知布局;用 <Suspense> 与 <Await resolve={promise}> 处理流式数据。
限制:资料未提供安装命令、版本要求、定价、平台支持及具体使用示例等细节。