从 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 的情况下这是必要的。Supertoken 与 React Router 有特定的设置，与所有其他 React 实现有不同的设置
• 设置 RouterProvider 并将路由器作为属性传递给它
• 将所有 React Router Link 组件实例替换为 @tanstack/react-router Link 组件
  • 添加带有字面路径的 to 属性
  • 在必要时添加 params 属性，参数如下 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.orderId