react-router

React Router

React Router はモード固有です。アプリを変更する前に、モードを特定し、対応するリファレンスを読み込み、その後、インストールされているパッケージバージョンのインストール済みドキュメントを読んでください。

モードの特定

意図的にモードを移行する場合を除き、Declarative アプリに Framework/Data のパターンを適用しないでください。

Framework モード

次のような場合に Framework モードのガイダンスを使用します。

• 依存関係に @react-router/dev がある
• react-router.config.ts
• app/routes.ts
• app/entry.server.tsx および／または app/entry.client.tsx ファイル
• app/routes/ 配下のルートモジュール
• loader、action、clientLoader、clientAction、ErrorBoundary、meta、links、headers などのルートエクスポート
• ./+types/... からのインポート
• @react-router/dev/vite からの React Router Vite プラグイン

Framework の例では通常デフォルトの app/ ディレクトリを使用しますが、正確なパスを想定する前に react-router.config.ts でカスタムの appDirectory を確認してください。

次に references/framework-mode.md を読んでください。

Data モード

次のような場合に Data モードのガイダンスを使用します。

• createBrowserRouter、createHashRouter、createMemoryRouter、または createStaticRouter
• <RouterProvider router={router}>
• path、children、loader、action、Component、ErrorBoundary、lazy などのプロパティを持つルートオブジェクト
• Framework Vite プラグインを使用しないデータ API

次に references/data-mode.md を読んでください。

Declarative モード

次のような場合に Declarative モードのガイダンスを使用します。

• <BrowserRouter>、<HashRouter>、または <MemoryRouter>
• <Routes> と <Route> の JSX ルート設定
• element={<Component />} で渡されるルートコンポーネント
• データルーターなし、ルートモジュール規約なし、ローダー／アクションなし

次に references/declarative-mode.md を読んでください。

RSC Framework モードと RSC Data モード

React Server Components のサポートは不安定であり、Framework と Data の両方のバリアントに存在します。次のような場合に RSC のガイダンスを使用します。

• unstable_reactRouterRSC
• @vitejs/plugin-rsc
• unstable_RSCRouteConfig
• entry.rsc などの RSC エントリファイル
• ServerComponent、ServerErrorBoundary、ServerLayout、または ServerHydrateFallback
• "use client"、"server-only"、"client-only" などの React ディレクティブまたはバウンダリパッケージ

RSC Framework の場合は、references/framework-mode.md と references/rsc.md の両方を読んでください。 RSC Data の場合は、references/data-mode.md と references/rsc.md の両方を読んでください。

インストール済みドキュメントを信頼できる情報源として使用する

React Router は、ガイダンスがインストールされているバージョンに一致するように、パッケージ内に markdown ドキュメントを同梱しています。

node_modules/react-router/docs/

主要なドキュメントのパス：

node_modules/react-router/docs/index.md
node_modules/react-router/docs/start/
node_modules/react-router/docs/how-to/
node_modules/react-router/docs/explanation/
node_modules/react-router/docs/upgrading/

このスキルが react-router/docs/... を参照する場合は、node_modules/react-router/docs/ 配下の対応するファイルを読んでください。インストールされているバージョンにローカルドキュメントが含まれていない場合は、React Router リポジトリ内で作業しているときはリポジトリの docs/ ディレクトリを使用し、利用側のアプリではバージョンに一致するウェブサイトのドキュメントにフォールバックしてください。

ほとんどのドキュメントには、先頭付近にモードマーカーが含まれています。

[MODES: framework, data, declarative]

ドキュメントのモードマーカーがアプリのモードと一致する場合にのみ、そのドキュメントを適用してください。タスクが複数のモードにまたがる場合は、現在のアプリに一致するセクションまたはファイルを優先してください。

RSC は主に以下でドキュメント化されています。

node_modules/react-router/docs/how-to/react-server-components.md

スキルのリファレンス

モードを特定した後、関連するリファレンスを読み込んでください。

リファレンス	使用する場合
references/framework-mode.md	Framework モードまたは RSC Framework の基本動作
references/data-mode.md	Data モードまたは RSC Data の基本動作
references/declarative-mode.md	Declarative モード
references/rsc.md	不安定な RSC アプリ全般

モード移行ドキュメントインデックス

ユーザーが明示的にモードの切り替えを求めた場合は、対象モードのリファレンスと移行に関連するドキュメントを読んでください:

移行	読むべきドキュメント
Declarative → Data	react-router/docs/start/modes.md、react-router/docs/start/data/routing.md、react-router/docs/start/data/data-loading.md、react-router/docs/start/data/actions.md
Declarative/Data → Framework	react-router/docs/start/modes.md、react-router/docs/start/framework/routing.md、react-router/docs/start/framework/route-module.md、react-router/docs/how-to/route-module-type-safety.md
Framework の SPA/SSR/プリレンダー変更	react-router/docs/start/framework/rendering.md、react-router/docs/how-to/spa.md、react-router/docs/how-to/pre-rendering.md、react-router/docs/start/framework/data-loading.md、react-router/docs/start/framework/actions.md
Future フラグ/アップグレード	react-router/docs/upgrading/future.md および react-router/docs/upgrading/ 配下の関連ファイル