react-router-framework-mode

React Router フレームワークモード

フレームワークモードは、ファイルベースのルーティング、サーバーサイド・クライアントサイド・静的レンダリング戦略、データの読み込みとミューテーション、型安全なルートモジュール API を備えた、React Router のフルスタック開発エクスペリエンスです。

適用する場面

• 新しいルートを設定する（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	ローダー、ストリーミング、キャッシュを使ったデータの読み込み
references/actions.md	フォーム、ミューテーション、検証の処理
references/navigation.md	リンク、プログラムによるナビゲーション、リダイレクト
references/pending-ui.md	読み込み状態、オプティミスティック UI
references/error-handling.md	エラーバウンダリ、エラー報告
references/rendering-strategies.md	SSR、SPA、事前レンダリングの設定
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 など

重要なパターン

以下は、従うべき最も重要なパターンです。詳細は関連するリファレンスを読み込んでください。

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

検索フォーム — 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?.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 - add navigation, footer, providers here
export default function App() {
  return (
    <div>
      <nav>...</nav>
      <Outlet />
      <footer>...</footer>
    </div>
  );
}

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

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

meta では、非推奨の data ではなく loaderData を使用します。

// ✅ Correct
export function meta({ loaderData }: Route.MetaArgs) { ... }

// ❌ Wrong - `data` is deprecated
export function meta({ data }: Route.MetaArgs) { ... }

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

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

React Router に関する情報がこれらのリファレンスにない場合は、公式ドキュメントを検索できます。

https://reactrouter.com/docs