SuperAPI AI 工具集

epic-routing

前端与建站

查看项目

更新于 10-15 21:38

技能介绍

用途:该技能用于在 Epic Stack 应用中创建路由与页面、实现嵌套布局、配置无 UI 的资源路由、处理路由参数与搜索参数,并理解其基于文件的路由约定,以及在路由中实现 loader 和 action。

主要能力:Epic Stack 使用 react-router-auto-routes 而非 React Router 标准约定,支持代码就近放置。约定包括:_layout.tsx 为子路由布局,index.tsx 为段根路由,$param.tsx 表示路由参数,[.]ext.tsx 表示资源路由;以 _ 开头的文件夹为路由组,不影响 URL;以 + 开头的模块为就近放置的非路由代码。资源路由不导出默认组件,只导出 loader 或 action。

使用方式:在 app/routes.ts 中通过 autoRoutes 配置,ignoredRouteFiles 可忽略 .、**/.css、/*.test.{js,jsx,ts,tsx}、/__.、/.server.、/.client. 等文件。loader 用于 GET 请求加载数据,action 用于 POST、PUT、DELETE 等数据变更;搜索参数通过 useSearchParams 访问。布局中使用 <Outlet /> 渲染子路由。

适用场景:适用于 Epic Stack 项目的页面与 API 路由开发,包括带参数的产品页、嵌套的笔记路由、下载类资源路由、健康检查等。

限制与注意:应保持路由结构简单,避免过度工程和过早抽象;资源路由不要导出默认组件;布局中不要忘记 <Outlet />;参数命名应为 $param.tsx;路由组不出现在 URL 中;使用参数前应进行校验。资料未提供该技能的安装命令、收费或价格信息。