该技能面向 Remix v2 的数据流编写,适用于编写 loader、action、延迟数据(deferred data)、重校验逻辑与 pending 状态。
路由模块导出 loader 与 action:loader 负责仅服务端的读取,签名接受 { request, params, context } 并返回 Response;action 处理非 GET 请求(POST/PUT/PATCH/DELETE)。组件通过 useLoaderData<typeof loader>() 与 useActionData<typeof action>() 读取结果。执行 action 后,Remix 会自动重校验页面中所有匹配路由的 loader,无需手动失效缓存。
服务端工具(json、redirect、defer、类型参数)从 @remix-run/node 导入,Cloudflare 或 Deno 目标改用对应包;钩子与组件从 @remix-run/react 导入。useLoaderData 的泛型是类型注解而非断言,通过 SerializeFrom 建模传输格式转换,例如 Date 变为 string、undefined 字段被剥离。json() 为可选包装,用于指定状态码、响应头或显式 TypedResponse<T>;非 JSON 响应体可自行构造 new Response。在 loader 或 action 中抛出 Response 可立即短路,用于鉴权跳转与 404;抛出普通 Error 不会被识别为路由响应。使用 defer() 时,可用 <Await errorElement> 搭配 useAsyncError() 就地捕获 promise 拒绝,避免整页被错误边界拆除。
loader 返回值会整体发送到浏览器,应先裁剪为安全 DTO,不要返回密码哈希、API 密钥或内部标记。变更逻辑必须放在 action 中,通过 Form 或 useFetcher 提交,直接 fetch 会绕过重校验、pending 状态与渐进增强。注意只有最深匹配的 action 会执行;useActionData 仅限当前路由;响应头取自最深匹配的 loader;默认重校验会覆盖页面上所有路由,可用 shouldRevalidate 退出昂贵的父级 loader。
v2 中 useTransition 已被 useNavigation 取代,提交对象扁平化,formMethod 变为大写;fetcher.type 已移除,应基于 fetcher.state 与 fetcher.formData 分支。GET 提交流程为 idle→loading→idle,POST 为 idle→submitting→loading→idle,仅以 submitting 判断加载状态会漏掉 GET 表单。资料未提供该技能的安装命令、收费方式或适用平台信息。