未来标志

以下未来标志已稳定并可以采用。有关未来标志的更多信息，请参阅开发策略

更新至最新 v6.x

首先更新至最新 v6.x 的次要版本，以获得最新的未来标志。

👉 更新至最新 v6

npm install react-router-dom@6

v7_relativeSplatPath

背景

更改了多段 splat 路径（如 dashboard/*（与 * 相比））的相对路径匹配和链接。查看 CHANGELOG 以获取更多信息。

👉 启用标志

启用标志取决于路由器类型

<BrowserRouter
  future={{
    v7_relativeSplatPath: true,
  }}
/>

createBrowserRouter(routes, {
  future: {
    v7_relativeSplatPath: true,
  },
});

更新您的代码

如果您有任何带有路径和 splat 的路由，例如 <Route path="dashboard/*">，并且在它下面有像 <Link to="relative"> 或 <Link to="../relative"> 这样的相对链接，您需要更新您的代码。

👉 将 <Route> 拆分为两个

将任何多段 splat <Route> 拆分为一个带有路径的父路由和一个带有 splat 的子路由

<Routes>
  <Route path="/" element={<Home />} />
-  <Route path="dashboard/*" element={<Dashboard />} />
+  <Route path="dashboard">
+    <Route path="*" element={<Dashboard />} />
+  </Route>
</Routes>

// or
createBrowserRouter([
  { path: "/", element: <Home /> },
  {
-    path: "dashboard/*",
-    element: <Dashboard />,
+    path: "dashboard",
+    children: [{ path: "*", element: <Dashboard /> }],
  },
]);

👉 更新相对链接

更新该路由树中任何 <Link> 元素，以包含额外的 .. 相对段，以继续链接到相同的位置

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
-        <Link to="/">Dashboard Home</Link>
-        <Link to="team">Team</Link>
-        <Link to="projects">Projects</Link>
+        <Link to="../">Dashboard Home</Link>
+        <Link to="../team">Team</Link>
+        <Link to="../projects">Projects</Link>
      </nav>

      <Routes>
        <Route path="/" element={<DashboardHome />} />
        <Route path="team" element={<DashboardTeam />} />
        <Route
          path="projects"
          element={<DashboardProjects />}
        />
      </Routes>
    </div>
  );
}

v7_startTransition

背景

这使用 React.useTransition 而不是 React.useState 来更新路由器状态。查看 CHANGELOG 以获取更多信息。

👉 启用标志

<BrowserRouter
  future={{
    v7_startTransition: true,
  }}
/>

// or
<RouterProvider
  future={{
    v7_startTransition: true,
  }}
/>

👉 更新您的代码

除非您在组件内部使用 React.lazy，否则您无需更新任何内容。

在组件内部使用 React.lazy 与 React.useTransition（或其他在组件内部创建 promise 的代码）不兼容。将 React.lazy 移动到模块范围，并停止在组件内部创建 promise。这不是 React Router 的限制，而是 React 的错误用法。

v7_fetcherPersist

如果您没有使用 createBrowserRouter，您可以跳过此步骤

背景

fetcher 生命周期现在基于它何时返回到空闲状态，而不是何时其所有者组件卸载：查看 CHANGELOG 以获取更多信息。

启用标志

createBrowserRouter(routes, {
  future: {
    v7_fetcherPersist: true,
  },
});

更新您的代码

它不太可能影响您的应用程序。您可能需要检查任何 useFetchers 的使用情况，因为它们可能比以前持续更长时间。根据您正在做的事情，您可能比以前渲染更长时间。

v7_normalizeFormMethod

如果您没有使用 createBrowserRouter，您可以跳过此步骤

这将 formMethod 字段规范化为大写 HTTP 方法，以与 fetch() 行为保持一致。查看 CHANGELOG 以获取更多信息。

👉 启用标志

createBrowserRouter(routes, {
  future: {
    v7_normalizeFormMethod: true,
  },
});

更新您的代码

如果您的任何代码正在检查小写 HTTP 方法，您需要将其更新为检查大写 HTTP 方法（或在其上调用 toLowerCase()）。

👉 将 formMethod 与大写进行比较

-useNavigation().formMethod === "post"
-useFetcher().formMethod === "get";
+useNavigation().formMethod === "POST"
+useFetcher().formMethod === "GET";

v7_partialHydration

如果您没有使用 createBrowserRouter，您可以跳过此步骤

这允许 SSR 框架仅提供部分水合数据。您不太可能需要担心这一点，只需打开标志即可。查看 CHANGELOG 以获取更多信息。

👉 启用标志

createBrowserRouter(routes, {
  future: {
    v7_partialHydration: true,
  },
});