SuperAPI AI 工具集

tanstack-router

前端与建站

查看项目

更新于 10-15 21:11

技能介绍

用途:当工作涉及 TanStack Router(尤其是 @tanstack/react-router、src/routes/**、src/router.tsx、路由树生成、类型化导航或路由数据加载)时使用本技能。

工作流程:先检查本地路由形态,包括 @tanstack/react-router、@tanstack/router-plugin、devtools、适配器及 Query/SSR 集成的包版本;路由模式(基于文件、基于代码、虚拟文件路由或混合);路由入口(src/routes/__root.tsx、src/router.tsx、生成的 src/routeTree.gen.ts、应用/客户端入口及 SSR 入口);影响行为的路由选项(validateSearch、params、beforeLoad、loaderDeps、loader、pendingComponent、errorComponent、notFoundComponent、search.middlewares、staleTime、gcTime、preload、ssr 集成)。随后刷新文档以获取当前行为、新版本、SSR、测试、路由生成或迁移信息,从 source-map.md 开始。

参考文档:setup-route-trees.md 用于安装、路由树生成、文件命名及在路由旁放置非路由模块(-components、-hooks、-lib 等);navigation-url-state.md 用于链接、导航、参数、搜索参数、掩码与 URL 状态;loaders-context-errors.md 用于加载器、上下文、鉴权守卫、Query 集成、错误/未找到边界、预加载与延迟数据;production-testing.md 用于 SSR、部署重写、测试、devtools、ESLint 与生产检查。

实现判断:除非仓库已用基于代码的路由或用户另有要求,优先基于文件的路由;routeTree.gen.ts 视为生成产物,不要手改,通过仓库的打包器/CLI 流程重新生成;将路由所属的 UI/hooks/helpers 放在连字符前缀文件夹中(routeFileIgnorePrefix,默认 -),不要在 routes/ 下留未加前缀的非路由文件;保持导航类型化,不要将参数或查询字符串插值进 to,而是分别传 to、params、search、hash;每个读取 URL 搜索状态的路由都应声明 validateSearch,用 loaderDeps 只暴露加载器实际使用的搜索字段;用 beforeLoad 做路由 UX 门控、重定向与上下文增强,不要将其视为私有数据授权边界;将路由共享依赖放入 router context,不要在 beforeLoad 或 loader 内直接调用 React hooks;明确选择 Router 内置 SWR 加载器缓存还是外部缓存(如 TanStack Query),当 Query 负责新鲜度时,将路由预加载 stale time 设为 0 并让 Query 去重,Query 5.102+ 通过 queryClient.query(...) 加载,ensureQueryData / prefetchQuery / fetchQuery 已弃用;在 React 中将 errorComponent / onCatch 错误类型标为 unknown,读取 message 前先收窄;在加载器中用 notFound() 处理未找到资源,以保持加载器数据类型正确并避免 UI 闪烁。

验证:优先使用仓库现有检查。对重要路由变更,包含相关子集:通过 dev/build 或显式 Router CLI 命令生成路由树;对路由引用、参数、搜索、加载器与上下文做类型检查;针对路由匹配、搜索验证、加载器、鉴权重定向、未找到/错误边界与导航的聚焦测试;对直接加载、客户端导航、前进/后退、刷新与生产重写行为做浏览器冒烟测试。

限制:资料未提供具体版本兼容矩阵、性能基准或收费信息。