SuperAPI AI 工具集

epic-routing

前端与建站

查看项目

更新于 10-16 08:37

技能介绍

用途:在 Epic Stack 应用中创建路由与页面、实现嵌套布局、配置资源路由、处理路由参数与搜索参数,并遵循其文件式路由约定编写 loader 与 action。

主要能力:基于 react-router-auto-routes 的文件式路由,而非 React Router 标准约定;用 _layout.tsx 提供子路由共享布局,用 <Outlet /> 渲染子路由;用 $param.tsx 声明路由参数;用 _ 前缀目录作路由分组(不影响 URL),如 _auth、_marketing;资源路由不导出默认组件,只导出 loader/action,用于 API、下载与 webhook;支持 useSearchParams 读写查询参数;支持 loader 预取数据、action 处理数据变更与表单提交;鼓励代码共置,用 + 前缀目录放非路由共享模块,如 +shared。

使用方式:路由文件置于 app/routes/ 下,在 app/routes.ts 中通过 autoRoutes 配置 ignoredRouteFiles(如 .、**/.css、/.test.、/__.、/.server.、/.client.)。命名约定包括 layout.tsx、index.tsx、$param.tsx、$param.action.tsx、robots[.]txt.ts 等资源路由写法。参数类型安全,可在 loader 中读 params.username。

适用场景:Epic Stack 项目中的页面与 API 路由开发。

限制与注意:避免过度设计、过早抽象与“以防万一”的嵌套路由;布局中勿忘 <Outlet />;资源路由勿导出默认组件;参数须命名为 $param 而非 :param 或 [param];路由分组不出现在 URL;使用前应校验参数存在。