react-router-v7

React Router v7 のベストプラクティス

クイックリファレンス

ルーターの設定（データモード）：

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

const router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    ErrorBoundary: RootErrorBoundary,
    loader: rootLoader,
    children: [
      { index: true, Component: Home },
      { path: "products/:productId", Component: Product, loader: productLoader },
    ],
  },
]);

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

フレームワークモード（Vite プラグイン）：

// routes.ts
import { index, route } from "@react-router/dev/routes";

export default [
  index("./home.tsx"),
  route("products/:pid", "./product.tsx"),
];

ルートの設定

Outlet を使用したネストされたルート

createBrowserRouter([
  {
    path: "/dashboard",
    Component: Dashboard,
    children: [
      { index: true, Component: DashboardHome },
      { path: "settings", Component: Settings },
    ],
  },
]);

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* Renders child routes */}
    </div>
  );
}

動的セグメントとスプラット

{ path: "teams/:teamId" }           // params.teamId
{ path: ":lang?/categories" }       // Optional segment
{ path: "files/*" }                 // Splat: params["*"]

主な判断ポイント

Form と Fetcher

<Form> を使用する場合：URL を変更して作成・削除する場合、履歴に追加する場合
useFetcher を使用する場合：インライン更新、リスト操作、ポップオーバーなど、URL を変更しない場合

Loader と useEffect

loader を使用する場合：レンダリング前のデータ取得、サーバーサイドでのフェッチ、自動再検証
useEffect を使用する場合：クライアントのみのデータ、ユーザー操作に依存する処理、サブスクリプション

判断基準（順番に判断）

順番に回答してください。Pass は条件が真であることを意味します。同じ行にある API を選択して、そこで終了します。

<Form> と useFetcher

1. URL または履歴スタックを変更する必要がありますか（ブックマーク／共有する場合、戻ると前の画面に戻る場合）？
   • Pass → <Form> / ルートの action（または useSubmit + ナビゲーション）。終了します。
   • Fail → ステップ 2。
2. ミューテーションは同じルートにとどまりますか（インライン編集、モーダル、リスト行など、アドレスを変更しない場合）？
   • Pass → useFetcher()。終了します。
   • Fail → ステップ 1 を再確認してください。専用のアクションルート、または現在の URL への POST が必要な場合があります。

loader と useEffect

1. このルートの正しい初回レンダリング（または意図した <Suspense> 境界）にデータが必要ですか？
   • Pass → loader（フレームワークモードでは、適切な場合に clientLoader）。終了します。
   • Fail → ステップ 2。
2. ルートに入ったときではなく、ユーザー操作、タイマー、またはサブスクリプションをきっかけに、マウント後にのみフェッチしますか？
   • Pass → useEffect / イベントハンドラー。終了します。
   • Fail → ナビゲーションを反映する effect よりも、loader + 再検証を優先してください。

関連ドキュメント

• データの読み込み：references/loaders.md を参照してください。loader のパターン、並列読み込み、検索パラメーターについて説明しています。
• ミューテーション：references/actions.md を参照してください。action、Form、fetcher、バリデーションについて説明しています。
• ナビゲーション：references/navigation.md を参照してください。Link、NavLink、プログラムによるナビゲーションについて説明しています。
• 高度なトピック：references/advanced.md を参照してください。エラーバウンダリー、保護されたルート、遅延読み込みについて説明しています。

モードの比較

機能	フレームワークモード	データモード	宣言的モード
設定	Vite プラグイン	createBrowserRouter	<BrowserRouter>
型安全性	型を自動生成	手動	手動
SSR サポート	組み込み	手動	限定的
用途	フルスタックアプリ	制御性の高い SPA	シンプル／レガシー