後續功能

以下後續功能已穩定，可供採用。詳見開發策略以瞭解後續功能。

更新至最新 v6.x

請先更新至 v6.x 最新次要版本以取得最新後續功能。

👉 更新至最新 v6

npm install react-router-dom@6

v7_relativeSplatPath

背景

變更多區段分段路徑的相對路徑比對和連結，例如 dashboard/*（而非僅是 *）。查看 CHANGELOG以取得更多資訊。

👉 啟用功能標記

啟用功能標記取決於路由類型

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

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

更新您的程式碼

如果您有任何含有路徑和分段的路由，例如 <Route path="dashboard/*">，並在下方含有相對連結，例如 <Link to="relative"> 或 <Link to="../relative">，您需要更新您的程式碼。

👉 將 <Route> 分成兩個

將任何多區段分段 <Route> 分成具有路徑的父路由和具有分段的子路由

<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 作為 Router 狀態更新。請參閱 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，則可以略過這個部分

背景

獲取器生命週期改用歸於閒置狀態時作為依據，而非擁有者元件卸載時：查看 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,
  },
});