用途:为 React SPA 提供类型安全的文件式路由,适合希望获得比 React Router 更好 TypeScript 支持、需要路由级数据加载或计划部署到 Cloudflare Workers 的项目。
主要能力:类型安全的 Link 跳转(路由与参数均受类型约束);文件式路由配置(类似 Next.js);路由 loader 数据加载;与 TanStack Query 集成,可在 loader 中用 queryClient.ensureQueryData 预取数据;提供路由开发工具与自动生成的路由树。
安装与用法: 安装:npm install @tanstack/react-router @tanstack/router-devtools 开发依赖:npm install -D @tanstack/router-plugin Vite 中需先注册 TanStackRouterVite(),再调用 react(),否则路由不会自动生成。路由文件用 createFileRoute 定义并导出 Route;根路由用 createRootRoute 配合 Outlet;入口用 createRouter 加载自动生成的 routeTree.gen,并通过 RouterProvider 渲染。
Cloudflare Workers 部署:Vite 配置中加入 @cloudflare/vite-plugin 的 cloudflare();后端可用 functions/api 下的 onRequestGet 等函数,客户端路由通过 fetch 访问 /api 接口。
已知限制:devtools 依赖解析失败时可安装 @tanstack/router-devtools;Vite 插件顺序错误会导致路由不生成;未在入口导入 routeTree.gen 会导致 Link 缺少类型;loader 不执行通常因未按约定导出 Route;TanStack Form 与 Router 同用存在已知内存泄漏问题(#5734),资料建议改用 React Hook Form 或等待修复。上述版本、兼容性与效率数据均来自资料,收费与价格暂未提供。