用途:这是从 React Router v7 迁移到 TanStack Router 的分步迁移清单,每项检查对应一个转换任务,需按顺序完成。
主要能力:覆盖迁移前准备(新建分支、临时并存安装 @tanstack/react-router、@tanstack/react-router-devtools、@tanstack/router-plugin、配置 Vite 插件、创建 src/routes);路由定义(__root.tsx、createRouter 与类型注册、createFileRoute、动态路由 /posts/$postId);导航(Link 使用 to 路径模式加 params,而非模板字符串;useNavigate 改为 navigate({ to, params }));搜索参数(用 validateSearch 加 z.object 校验,Route.useSearch() 读取,navigate 用函数形式更新);路径参数(useParams({ from }));useLocation 需替换为 useMatch、useMatches、useParams、useSearch 等具体 Hook;Outlet 仅改导入来源;loaders 改为路由选项并用 Route.useLoaderData() 读取,默认在客户端运行;代码分割可用插件 autoCodeSplitting: true 或 .lazy.tsx 文件。
使用方式:按清单顺序执行;迁移完成后运行 npm uninstall react-router react-router-dom,用 grep 查找残留导入,再用 npx tsc --noEmit 验证构建,并测试路由渲染、前进后退、搜索参数、动态参数与 loaders。
限制与注意:文档中的具体代码示例此处未完整收录,仅保留必要命令原样。若迁移后页面空白,检查控制台;出现 cannot use useNavigate outside of context 通常说明仍混用 React Router 导入。React Router v7 推荐从 react-router 导入,需检查两个包。TanStack Router 的 useLocation 与 React Router 同名但语义不同,不应直接替换。文档未提供价格、平台或效果等信息。