React Router 首頁

React Router 是一個多策略的 React 路由器，彌合了從 React 18 到 React 19 的差距。您可以將其最大程度地用作 React 框架，或最小程度地用作具有您自己架構的函式庫。

如果您已了解未來標誌，從 React Router v6 或 Remix 升級通常是非破壞性的

React Router 作為函式庫

與之前的版本一樣，React Router 仍然可以用作一個簡單、宣告式的路由函式庫。它的唯一工作是將 URL 與一組元件匹配，提供對 URL 資料的存取，以及在應用程式中導航。

此策略在具有自己前端基礎架構的「單頁應用程式」和尋求無壓力升級的 v6 應用程式中很受歡迎。

它特別適用於離線 + 同步架構，在這些架構中，待處理狀態很少見，並且使用者具有長時間執行的工作階段。諸如待處理狀態、程式碼分割、伺服器端渲染、SEO 和初始頁面載入時間等框架功能可以換取即時的本地優先互動。

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard" element={<Dashboard />}>
        <Route index element={<RecentActivity />} />
        <Route path="project/:id" element={<Project />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

開始使用 React Router 作為函式庫。

React Router 作為框架

React Router 可以最大程度地用作您的 React 框架。在此設定中，您將使用 React Router CLI 和 Vite bundler 外掛程式來實現全端開發和部署架構。這使 React Router 能夠提供大多數 Web 專案所需的大量功能，包括

Vite bundler 和開發伺服器整合
熱模組替換
程式碼分割
具有類型安全的路由約定
基於檔案系統或設定檔的路由
具有類型安全的資料載入
具有類型安全的動作
動作後自動重新驗證頁面資料
SSR、SPA 和靜態渲染策略
用於待處理狀態和樂觀 UI 的 API
部署適配器

路由是使用 routes.ts 配置的，這使 React Router 能夠為您做很多事情。例如，它將自動分割每個路由的程式碼，為參數和資料提供類型安全，並在使用者導航到路由時自動載入資料，並可以存取待處理狀態。

import {
  type RouteConfig,
  route,
  index,
  layout,
  prefix,
} from "@react-router/dev/routes";

export default [
  index("./home.tsx"),
  route("about", "./about.tsx"),

  layout("./auth/layout.tsx", [
    route("login", "./auth/login.tsx"),
    route("register", "./auth/register.tsx"),
  ]),

  ...prefix("concerts", [
    index("./concerts/home.tsx"),
    route(":city", "./concerts/city.tsx"),
    route(":city/:id", "./concerts/show.tsx"),
    route("trending", "./concerts/trending.tsx"),
  ]),
] satisfies RouteConfig;

您將可以存取路由模組 API，其他大多數功能都建立在其基礎之上。

Loaders 為路由元件提供資料

// loaders provide data to components
export async function loader({ params }: Route.LoaderArgs) {
  const [show, isLiked] = await Promise.all([
    fakeDb.find("show", params.id),
    fakeIsLiked(params.city),
  ]);
  return { show, isLiked };
}

元件在其配置的 URL 從 routes.ts 渲染，並將 loader 資料作為 prop 傳遞進來

export default function Show({
  loaderData,
}: Route.ComponentProps) {
  const { show, isLiked } = loaderData;
  return (
    <div>
      <h1>{show.name}</h1>
      <p>{show.description}</p>

      <form method="post">
        <button
          type="submit"
          name="liked"
          value={isLiked ? 0 : 1}
        >
          {isLiked ? "Remove" : "Save"}
        </button>
      </form>
    </div>
  );
}

動作可以更新資料並觸發頁面上所有資料的重新驗證，因此您的 UI 會自動保持最新

export async function action({
  request,
  params,
}: Route.LoaderArgs) {
  const formData = await request.formData();
  await fakeSetLikedShow(formData.get("liked"));
  return { ok: true };
}

路由模組還為 SEO、資源載入、錯誤邊界等提供約定。

開始使用 React Router 作為框架。