React Router Framework Mode

Framework mode は React Router のフルスタック開発エクスペリエンスで、ファイルベースのルーティング、サーバーサイド・クライアントサイド・静的レンダリング戦略、データロードとミューテーション、タイプセーフなルートモジュール API を備えています。

適用する場合

• 新しいルートを設定する (app/routes.ts)
• loader または clientLoader でデータをロードする
• action または clientAction でミューテーションを処理する
• <Link>、<NavLink>、<Form>、redirect、useNavigate でナビゲートする
• 保留中/読み込み中 UI 状態を実装する
• SSR、SPA モード、または事前レンダリングを設定する (react-router.config.ts)
• 認証を実装する

リファレンス

特定の API/コンセプトについて詳しいガイダンスを得るために、該当するリファレンスを読み込んでください:

リファレンス	使用場面
references/routing.md	ルート設定、ネストされたルート、動的セグメント
references/route-modules.md	ルートモジュールの全エクスポート を理解する
references/special-files.md	root.tsx のカスタマイズ、グローバルナビ/フッター、フォント
references/data-loading.md	loader でのデータロード、ストリーミング、キャッシング
references/actions.md	フォーム処理、ミューテーション、バリデーション
references/navigation.md	リンク、プログラマティックナビゲーション、リダイレクト
references/pending-ui.md	読み込み状態、楽観的 UI
references/error-handling.md	エラーバウンダリー、エラーレポート
references/rendering-strategies.md	SSR vs SPA vs 事前レンダリング設定
references/middleware.md	ミドルウェア追加 (v7.9.0+ が必要)
references/sessions.md	Cookie セッション、認証、保護されたルート
references/type-safety.md	自動生成ルートタイプ、型インポート、型安全性

バージョン互換性

一部の機能は特定の React Router バージョンが必要です。実装前に必ず確認してください:

npm list react-router

機能	最小バージョン	注記
ミドルウェア	7.9.0+	v8_middleware フラグが必要
コアフレームワーク機能	7.0.0+	loaders、actions、Form など

重要なパターン

これらが最も重要なパターンです。詳細については関連するリファレンスを読み込んでください。

フォーム & ミューテーション

検索フォーム - <Form method="get"> を使用し、onSubmit で setSearchParams を使わない:

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

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

インラインミューテーション - useFetcher を使用し、<Form> を使わない (ページナビゲーションを引き起こす):

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

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

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

レイアウト

グローバル UI は root.tsx に配置する - ナビ/フッター用の別のレイアウトファイルを作成しない:

// app/root.tsx - ナビゲーション、フッター、プロバイダーをここに追加
export default function App() {
  return (
    <div>
      <nav>...</nav>
      <Outlet />
      <footer>...</footer>
    </div>
  );
}

セクション固有のレイアウトにはネストされたルートを使用する。 references/routing.md を参照してください。

ルートモジュールエクスポート

meta は loaderData を使用する、廃止された data ではなく:

// ✅ 正しい
export function meta({ loaderData }: Route.MetaArgs) { ... }

// ❌ 誤り - `data` は廃止予定
export function meta({ data }: Route.MetaArgs) { ... }

すべてのエクスポートについては references/route-modules.md を参照してください。

さらに詳しいドキュメント

これらのリファレンスでカバーされていない React Router 関連の情報がある場合は、公式ドキュメントで検索できます:

https://reactrouter.com/docs