react-router-data-mode

React Router データモード

データモードでは、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	ローダーを使ったデータの読み込み
references/actions.md	フォーム、変更、検証の処理
references/navigation.md	リンク、プログラムによる移動、リダイレクト
references/pending-ui.md	読み込み状態、楽観的 UI
references/ssr.md	データモードでのサーバーサイドレンダリング

重要なパターン

以下は、必ず従うべき重要なパターンです。詳細については、該当する参考資料を読み込んでください。

基本的なルーターの設定

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} />);

フォームと変更

検索フォーム — setSearchParams を使った onSubmit ではなく、<Form method="get"> を使用してください。

// ✅ Correct
<Form method="get">
  <input name="q" />
</Form>

// ❌ Wrong - don't manually handle search params
<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();

  // Optimistic: use pending form data, fallback to server state
  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