用途:面向 React Router v7 的框架模式速查,说明服务端优先的数据加载与变更写法,覆盖 loaders、actions、数据校验、Form 用法与路由错误处理。
主要能力:以 loader 作为服务端数据缓存,配合 useLoaderData<typeof loader>() 获得类型推断;用 <Form method="post"> 提交变更,通过隐藏字段 _intent 区分多动作路由,返回 Response.json() 传递成功或错误;用 useFetcher 处理非导航变更并结合 fetcher.formData 做乐观 UI;用 useSearchParams 保存筛选、排序与分页;并提供路由级 ErrorBoundary、useRouteError 与 isRouteErrorResponse 的错误处理方式。
使用方式:在路由模块中导出 loader 与 action,组件内只读 useLoaderData 与 useActionData,不直接在组件中调用 API 客户端;表单字段用 defaultValue 等非受控写法;action 成功后框架自动重跑 loader,跨路由更新可用 useRevalidator。SSR 部分涉及 entry.server.tsx、entry.client.tsx 与 root.tsx 三个入口,要求 Provider 结构在服务端与客户端保持一致,并避免使用模块级单例。
适用场景:需要服务端渲染、表单渐进增强、URL 驱动列表状态以及统一错误处理的 React Router v7 应用。
限制:资料未提供版本要求、安装命令、性能数据或收费信息;错误边界不捕获事件处理器与 React 渲染之外的异步错误,相关错误需自行 try/catch 或处理 promise 链。