SuperAPI AI 工具集

tanstack-start-routes

通用与其它

查看项目

更新于 10-16 06:50

技能介绍

用途:在 TanStack Start 项目中使用 TanStack Router 的文件式路由创建和管理路由,适用于新增页面、配置布局、嵌套路由、路由参数与结构组织。

主要能力:路由文件放在 src/routes 目录。__root.tsx 为必需根布局,定义文档外壳;index.tsx 对应首页;about.tsx 对应 /about。布局路由(如 posts.tsx)通过 Outlet 包裹子路由;posts.index.tsx 为索引路由。动态段用 $paramName(如 posts.$postId.tsx),多参数可组合(users.$userId.posts.$postId.tsx),通过 Route.useParams() 读取。以 _ 开头为无 URL 段的路径无关布局(如 _auth.tsx,_auth.login.tsx 渲染在 /login)。$ 为通配路由(files.$.tsx),参数为 _splat。根路由可设 notFoundComponent 处理 404。路由配置支持 component、errorComponent、pendingComponent、notFoundComponent、parseParams、stringifyParams、validateSearch。文件命名支持点号扁平式与目录式,可混用;括号目录仅用于组织,不影响 URL。router.tsx 用 createRouter 传入 routeTree 并声明模块注册。

使用方式:按上述命名约定创建文件,导出 createFileRoute 生成的 Route;在 router.tsx 中引入自动生成的 routeTree.gen.ts 完成配置。

限制:资料未提供安装命令、版本要求、收费与平台信息;示例代码需按项目实际调整。