React Router Data Mode

Data mode は createBrowserRouter と RouterProvider を使用して、フレームワークの Vite プラグインを使わずにデータ読み込み、アクション、ペンディング UI を実現します。これは既存の React アプリケーションにデータ読み込みと変更機能を追加したい場合に理想的です。

適用時期

• createBrowserRouter をルートオブジェクトで使用している
• ルートの loader プロパティでデータを読み込んでいる
• action プロパティで変更を処理している
• <Link>, <NavLink>, <Form>, redirect, useNavigate でナビゲートしている
• useNavigation でペンディング/読み込み中 UI 状態を実装している
• ナビゲーションなしで変更を行う場合に useFetcher を使用している

リファレンス

具体的な API やコンセプトについての詳細なガイダンスは、以下のリファレンスを参照してください:

リファレンス	使用場面
references/routing.md	ルート、ネストされたルート、レイアウトの設定
references/route-object.md	ルートオブジェクトプロパティの理解
references/data-loading.md	loader を使用したデータ読み込み
references/actions.md	フォーム処理、変更、バリデーション
references/navigation.md	リンク、プログラマティックナビゲーション、リダイレクト
references/pending-ui.md	読み込み状態、楽観的 UI
references/ssr.md	Data mode を使用したサーバーサイドレンダリング

重要なパターン

これらは従うべき最も重要なパターンです。詳細については、関連するリファレンスを参照してください。

基本的なルーターセットアップ

import { createBrowserRouter, RouterProvider } from "react-router";

const router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    children: [
      { index: true, Component: Home },
      { path: "about", Component: About },
    ],
  },
]);

ReactDOM.createRoot(root).render(<RouterProvider router={router} />);

フォームと変更

検索フォーム - onSubmit で手動で setSearchParams を処理せず、<Form method="get"> を使用してください:

// ✅ 正しい
<Form method="get">
  <input name="q" />
</Form>

// ❌ 間違い - 検索パラメータを手動で処理しない
<form onSubmit={(e) => { e.preventDefault(); setSearchParams(...) }}>

インライン変更 - ページナビゲーションの原因となる <Form> ではなく、useFetcher を使用してください:

const fetcher = useFetcher();
const optimistic = fetcher.formData
  ? fetcher.formData.get("favorite") === "true"
  : isFavorite;

<fetcher.Form method="post" action={`/favorites/${id}`}>
  <button>{optimistic ? "★" : "☆"}</button>
</fetcher.Form>;

完全なパターンについては references/actions.md を参照してください。

楽観的 UI パターン

fetcher.formData を使用して期待される結果を即座に表示してください:

function FavoriteButton({ itemId, isFavorite }) {
  const fetcher = useFetcher();

  // 楽観的: ペンディング フォーム データを使用、サーバー状態へフォールバック
  const optimistic = fetcher.formData
    ? fetcher.formData.get("favorite") === "true"
    : isFavorite;

  return (
    <fetcher.Form method="post" action={`/items/${itemId}/favorite`}>
      <input type="hidden" name="favorite" value={String(!optimistic)} />
      <button>{optimistic ? "★" : "☆"}</button>
    </fetcher.Form>
  );
}

完全なパターンについては references/pending-ui.md を参照してください。

さらなるドキュメント

これらのリファレンスに含まれていない React Router 関連の内容がある場合は、公式ドキュメントを検索できます:

https://reactrouter.com/docs