从 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 非常相似，如果这是你们公司的工作方式，则很可能在一个或两个 sprint 周期内处理完成。
• 为我们现有的每个 React Router 路由创建 Routes
• 创建根路由
• 创建 router 实例
• 在 main.tsx 中添加全局模块
• 从 main.tsx 中删除任何 React Router (createBrowserRouter 或 BrowserRouter), Routes 和 Route 组件
• 可选： 重构 render 函数以进行自定义设置/提供程序 - 上面引用的仓库有一个示例 - 这在 Supertokens 的情况下是必要的。 Supertoken 对 React Router 有特定的设置，对所有其他 React 实现有不同的设置
• 设置 RouterProvider 并将 router 作为 prop 传递给它
• 将所有 React Router Link 组件的实例替换为 @tanstack/react-router Link 组件
  • 添加带有字面路径的 to prop
  • 添加 params prop，在必要时使用如下参数 params={{ orderId: order.id }}
• 将所有 React Router useNavigate hook 的实例替换为 @tanstack/react-router useNavigate hook
  • 在需要的地方设置 to 属性和 params 属性
• 将任何 React Router 的 Outlet 替换为 @tanstack/react-router 的等效组件
• 如果你正在使用 React Router 的 useSearchParams hook，请将搜索参数默认值移动到 Route 定义的 validateSearch 属性。
  • 不要使用 useSearchParams hook，而是使用 @tanstack/react-router Link 的 search 属性来更新搜索参数状态
  • 要读取搜索参数，你可以执行以下操作
    • const { page } = useSearch({ from: productPage.fullPath })
• 如果使用 React Router 的 useParams hook，请更新导入以来自 @tanstack/react-router ，并将 from 属性设置为你要从中读取 params 对象的字面路径名称
  • 假设我们有一个路由，其路径名称为 orders/$orderid。
  • 在 useParams hook 中，我们会像这样设置我们的 hook： const params = useParams({ from: "/orders/$orderId" })
  • 然后，无论我们在哪里想访问订单 id，我们都可以从 params 对象 params.orderId 中获取它