SuperAPI AI 工具集

tanstack-router

前端与建站

查看项目

更新于 10-15 21:04

技能介绍

用途:为 React SPA 构建类型安全的文件式路由,适合需要强 TypeScript 支持、路由级数据加载以及部署到 Cloudflare Workers 的项目。

主要能力:类型安全导航(Link 的 to 与 params 均受类型约束,路由不存在会报错);文件式路由(类似 Next.js 的目录约定);路由 loader 数据获取;与 TanStack Query 集成(queryOptions 配合 ensureQueryData);嵌套路由与布局;Cloudflare Workers 部署模式。

安装:bun add @tanstack/react-router @tanstack/router-devtools;bun add -d @tanstack/router-plugin。资料标注版本 v1.170.18(2026-08-03 验证)。

用法要点:在 vite.config.ts 中注册 TanStackRouterVite(),且必须放在 react() 之前;路由文件用 createFileRoute 导出 Route;在 main.tsx 引入自动生成的 routeTree.gen 并创建 router。

常见问题:devtools 依赖缺失时安装 @tanstack/router-devtools;插件顺序错误会导致路由不生成;未引入 routeTree.gen 会导致类型缺失;loader 不执行需确认导出 Route;TanStack Form 与 Router 同用存在已知内存泄漏问题(#5734),可改用 React Hook Form 或等待修复。

限制:资料未提供收费、价格与完整平台支持信息;部分内容(如模板与参考文档路径)依赖本地技能目录。