React Router ホーム

React Routerは、React 18からReact 19へのギャップを埋める、React用のマルチ戦略ルーターです。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バンドラープラグインを使用して、フルスタックの開発およびデプロイアーキテクチャを実現します。これにより、React Routerは、ほとんどのWebプロジェクトが必要とする以下の機能を含む、幅広い機能セットを提供できます。

Viteバンドラーと開発サーバーの統合
ホットモジュールリプレースメント（HMR）
コード分割
型安全性を備えたルート規約
ファイルシステムまたは設定ベースのルーティング
型安全性を備えたデータローディング
型安全性を備えたアクション
アクション後のページデータの自動再検証
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 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 };
}

コンポーネントは、routes.tsで設定されたURLでレンダリングされ、ローダーデータが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をフレームワークとして使い始める