SuperAPI AI 工具集

tanstack-router-migration

通用与其它

查看项目

更新于 10-16 01:49

技能介绍

用途:把 React 应用从 React Router 迁移到 TanStack Router,采用 src/routes/ 目录的基于文件路由,支持增量迁移与彻底迁移两种方式。

主要能力:分七个阶段推进——评估现有 React Router 用法、配置构建工具与 linter、创建路由实例、迁移路由文件、迁移钩子、编写测试、接入 Sentry 与 nuqs 等集成。提供路由文件命名规则(index.tsx、$param.tsx、_layout.tsx、$.tsx)、钩子对照表(useParams、useSearchParams、useNavigate、useLocation、Link、Navigate)以及 Zod 搜索参数校验模式。

必要用法:安装依赖 bun add @tanstack/react-router @tanstack/zod-adapter 与 bun add -d @tanstack/router-plugin;在 Vite 或 Rspack 中配置对应插件并忽略 routeTree.gen.ts 的监听;钩子必须带 from 参数(如 useParams({ from: '/items/$id' }));可选搜索参数用 fallback() 包裹;注册 router 类型以获得完整 TypeScript 推断。

适用场景:React Router v5/v6 项目迁移、需要类型安全路由与搜索参数校验的前端工程、使用 React Query、Sentry、nuqs 的项目。

限制:不得编辑自动生成的 routeTree.gen.ts;迁移期间新代码不得使用 React Router 钩子;索引路由的 from 需带尾部斜杠,非索引路由不带;navigate() 返回 Promise,需 void 或 await;分区重定向应使用 beforeLoad 配合 throw redirect()。具体版本兼容范围与性能数据暂未提供。