Anuragg13/AiResumeAnalyzer

React Router

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

モードの特定

意図的に移行しない限り、Framework/Data のパターンを Declarative アプリに適用しないでください。

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 プラグインなしの Data 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/ 配下の関連ファイル