SuperAPI AI 工具集

react-router

前端与建站

查看项目

更新于 10-16 08:11

技能介绍

用途:该技能面向 React Router v7 全栈开发,适用于处理路由、loader、action、SSR,以及 apps/web 中的 Web 应用。前端应用位于 apps/web/,使用 React Router v7 并启用 SSR。

主要能力:采用基于文件的路由,路由由 app/routes/ 下的文件结构定义,例如 _index.tsx 对应 /、products.$id.tsx 对应 /products/:id、$.tsx 为 catch-all(404)。支持布局路由,如 products.tsx 作为 /products/* 的布局。路由模块可导出 loader 进行服务端数据获取、导出 action 处理表单提交与变更、导出 meta 设置页面元信息、导出 ErrorBoundary 处理错误。支持 Link、NavLink、useNavigate 等导航方式。可结合 TanStack Query 做客户端数据缓存,使用 @projectx/ui 组件库,并以 Tailwind CSS v4 编写样式。

使用方式:开发时运行 pnpm dev:web(带 HMR),生产构建运行 pnpm build:web,类型检查运行 pnpm --filter web typecheck。路由类型通过生成的 +types 文件获得。

适用场景:需要 SSR 的 SEO 关键页面、表单处理、服务端数据获取与错误边界等全栈 Web 开发场景。

限制:资料未提供安装步骤、版本要求、收费或价格信息,暂未提供。