SuperAPI AI 工具集

react-router-framework-mode

前端与建站

查看项目

更新于 10-16 09:50

技能介绍

用途:指导使用 React Router 框架模式(framework mode)构建全栈 React 应用,适合配置路由、处理数据加载与变更、表单、导航与渲染策略等场景。

主要能力:覆盖在 app/routes.ts 配置路由;用 loader 或 clientLoader 加载数据、action 或 clientAction 处理变更;用 Link、NavLink、Form、redirect、useNavigate 导航;实现待定/加载状态;在 react-router.config.ts 配置 SSR、SPA 模式或预渲染;实现认证。提供 routing、route-modules、special-files、data-loading、actions、navigation、pending-ui、error-handling、rendering-strategies、middleware、sessions、type-safety 等参考文档,按具体 API 加载。

必要用法与关键模式:搜索表单用 <Form method="get">,不要用 onSubmit 配合 setSearchParams;内联变更用 useFetcher,而非会导致页面跳转的 <Form>;全局 UI 放在 root.tsx,分区布局用嵌套路由;route module 的 meta 使用 loaderData,data 已弃用。使用前用 npm list react-router 确认版本:中间件需 7.9.0+ 且启用 v8_middleware 标志,核心框架功能需 7.0.0+。

限制:部分特性对版本有硬性要求,实施前须核实版本;资料未提供收费、价格、平台支持范围或效果数据。