用途:这是一份从 React Router v7 迁移到 TanStack Router 的分步检查清单,每项对应一个转换任务,建议按顺序完成。
主要能力:覆盖路由定义转换(createRootRoute、createFileRoute、createRouter 与类型注册)、动态路由语法(:postId 改为 $postId)、Link 与 useNavigate 的 to+params 写法、useSearchParams 改为 validateSearch+useSearch、useParams 的 from 属性、useLocation 的替代钩子(useMatch/useMatches/useParams/useSearch)、Outlet、loader 转换、代码分割(autoCodeSplitting 或 .lazy.tsx)以及清理步骤。
必要用法:先建迁移分支并临时并行安装依赖:npm install @tanstack/react-router @tanstack/react-router-devtools 与 npm install -D @tanstack/router-plugin;在 Vite 配置中启用 tanstackRouter 插件;创建 src/routes 目录;迁移完成后执行 npm uninstall react-router react-router-dom、grep 检查残留导入、npx tsc --noEmit 验证。
限制与注意:迁移后若界面空白,通常是 React Router 导入残留导致上下文错误;TanStack Router 的 useLocation 与 React Router 同名但不等价,不应直接替换;loader 默认在客户端运行;action 需改用 mutations 或表单库。资料未提供具体版本兼容范围与性能数据。