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 /> {/* 子ルートをレンダリング */}
    </div>
  );
}

動的セグメントと Splat

{ path: "teams/:teamId" }           // params.teamId
{ path: ":lang?/categories" }       // オプショナルセグメント
{ path: "files/*" }                 // Splat: params["*"]

重要な判断ポイント

Form vs Fetcher

<Form> を使用: URL 変更を伴う作成/削除、履歴への追加 useFetcher を使用: インライン更新、リスト操作、ポップオーバー - URL 変更なし

Loader vs useEffect

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

ゲート (判定シーケンス)

順番に回答してください。合致 は条件が真であることを意味します。同じ行の API を選択して停止してください。

<Form> vs useFetcher

1. URL または履歴スタックが変更される必要がある (ブックマーク/共有、戻るボタンで前の画面に戻る)?
   • 合致 → <Form> / route action (useSubmit + ナビゲーション)。停止。
   • 非合致 → ステップ 2 へ。
2. ミューテーションが同じルートに留まる (インライン編集、モーダル、リスト行、アドレス変更なし)?
   • 合致 → useFetcher()。停止。
   • 非合致 → ステップ 1 を再確認。専用アクションルートまたは現在の URL への POST が必要な場合があります。

loader vs useEffect

1. 正しい最初のレンダリング (または意図した <Suspense> 境界) にデータが必要か (このルートの場合)?
   • 合致 → loader (フレームワーク: 適切な場合は clientLoader)。停止。
   • 非合致 → ステップ 2 へ。
2. マウント後のみフェッチ (ユーザーアクション、タイマー、またはサブスクリプションから。ルート入力ではなく)?
   • 合致 → useEffect / イベントハンドラー。停止。
   • 非合致 → ナビゲーションをミラーリングするエフェクトよりも loader + 再検証を優先します。

追加ドキュメント

• データ読み込み: references/loaders.md でローダーパターン、並列読み込み、検索パラメータを参照
• ミューテーション: references/actions.md でアクション、Form、フェッチャー、バリデーションを参照
• ナビゲーション: references/navigation.md で Link、NavLink、プログラマティックナビゲーションを参照
• アドバンス: references/advanced.md でエラーバウンダリ、保護されたルート、遅延ロードを参照

モード比較

機能	フレームワークモード	データモード	宣言的モード
セットアップ	Vite プラグイン	createBrowserRouter	<BrowserRouter>
型安全性	自動生成型	手動	手動
SSR サポート	組み込み	手動	限定的
ユースケース	フルスタックアプリ	制御可能な SPA	シンプル/レガシー