从 React Router 迁移检查清单

如果你的 UI 是空白的，请打开控制台，你可能会看到类似 cannot use 'useNavigate' outside of context 的错误。这意味着仍然导入并引用了 React Router API，你需要找到并删除它们。确保找到所有 React Router 导入的最简单方法是卸载 react-router-dom，然后你的文件应该会出现 TypeScript 错误。这样你就会知道需要将哪些内容更改为 @tanstack/react-router 导入。

这是 示例仓库

• 安装 Router - npm i @tanstack/react-router (参阅 详细安装指南)
• 可选： 卸载 React Router 以获取导入上的 TypeScript 错误。
  • 目前我不知道是否可以逐步迁移，但似乎你可能会有多个路由提供者，这并不可取。
  • React Router 和 TanStack Router 之间的 API 非常相似，如果这是你公司做事的方式，很可能可以在一两个冲刺周期内完成。
• 为我们现有的每个 React Router 路由创建路由
• 创建根路由
• 创建路由实例
• 在 main.tsx 中添加全局模块
• 从 main.tsx 中删除所有 React Router (createBrowserRouter 或 BrowserRouter)、Routes 和 Route 组件
• 可选： 为自定义设置/提供者重构 render 函数 - 上述引用的仓库有一个示例 - 在 Supertokens 的情况下，这是必要的。Supertokens 对于 React Router 有特定的设置，而对于所有其他 React 实现有不同的设置
• 设置 RouterProvider 并将其作为 prop 传递给 router
• 将所有 React Router Link 组件替换为 @tanstack/react-router Link 组件
  • 添加带有字面路径的 to prop
  • 在必要时添加 params prop，像这样带参数 params={{ orderId: order.id }}
• 将所有 React Router useNavigate 钩子替换为 @tanstack/react-router useNavigate 钩子
  • 在需要时设置 to 属性和 params 属性
• 将所有 React Router Outlet 替换为 @tanstack/react-router 等效项
• 如果你正在使用 React Router 的 useSearchParams 钩子，请将搜索参数的默认值移动到路由定义上的 validateSearch 属性。
  • 不要使用 useSearchParams 钩子，而应使用 @tanstack/react-router Link 的 search 属性来更新搜索参数状态
  • 要读取搜索参数，你可以执行以下操作
    • const { page } = useSearch({ from: productPage.fullPath })
• 如果使用 React Router 的 useParams 钩子，请将导入更新为来自 @tanstack/react-router，并将 from 属性设置为你想要读取参数对象的字面路径名
  • 比方说我们有一个路径名为 orders/$orderid 的路由。
  • 在 useParams 钩子中，我们将这样设置我们的钩子：const params = useParams({ from: "/orders/$orderId" })
  • 然后，无论我们想访问订单 ID 的地方，我们都可以从 params 对象中获取它 params.orderId