react-router

React Router

このスキルは React Router v7.13.0 に基づいており、2026-01-31 に生成されました。

React Router は、React 18 から React 19 への移行をつなぐ、マルチストラテジーのルーターです。React フレームワークとして最大限に活用することも、必要最小限で使用することもできます。Declarative（基本的なルーティング）、Data（ローダー／アクションを使用）、Framework（型安全性とコード分割を備えたフル機能）の 3 つのモードをサポートしています。

コアリファレンス

トピック	説明	リファレンス
モード	Framework、Data、Declarative の 3 つの使用モードと、適切なアプローチの選び方	core-modes
ルーティング	ルート設定、パスパターン、ネストされたルート、レイアウトルート、ルートのマッチング	core-routing
ナビゲーション	ナビゲーションコンポーネントとフック：Link、NavLink、Form、useNavigate、redirect	core-navigation
データの読み込み	ルートモジュールでローダーと clientLoaders を使用したデータの読み込み	core-data-loading
アクション	ルートモジュールでアクションと clientActions を使用したデータの変更	core-actions
ルートモジュール	ルートモジュール API：component、loader、action、エラーバウンダリー、headers、meta など	core-route-module
フック	React Router の主要なフック：useNavigation、useLocation、useParams、useMatches など	core-hooks

機能

データ管理

トピック	説明	リファレンス
フェッチャー	ナビゲーションせずにデータを並行して操作するためのフェッチャーの使用	features-fetchers
エラー処理	エラーバウンダリー、エラー処理、エラーレスポンス	features-error-handling
ミドルウェア	認証、ログ記録、リクエスト処理のためのミドルウェア	features-middleware

フォームとユーザー入力

トピック	説明	リファレンス
フォームの検証	フォーム検証のパターン、エラー処理、ユーザーへのフィードバック	features-form-validation
ファイルのアップロード	マルチパートフォームデータとファイルストレージを使用したファイルアップロードの処理	features-file-uploads
検索パラメーター	useSearchParams フックを使用した URL 検索パラメーターの操作	features-search-params

ナビゲーションと UX

トピック	説明	リファレンス
ビュートランジション	View Transitions API を使用したスムーズなページ遷移	features-view-transitions
ナビゲーションのブロック	保存されていないフォームデータがある場合に useBlocker でナビゲーションをブロック	features-navigation-blocking

ベストプラクティス

トピック	説明	リファレンス
型安全性	Route 型、自動型推論、型生成による型安全性	best-practices-type-safety

上級トピック

トピック	説明	リファレンス
ストリーミング	Suspense を使用したストリーミング、重要度の低いデータの遅延、React Suspense との統合	advanced-streaming
プリレンダリング	ページの読み込みを高速化するため、ビルド時に静的ページをプリレンダリング	advanced-pre-rendering
SPA モード	SSR を無効にし、クライアント側ルーティングを使用するシングルページアプリモード	advanced-spa-mode

主な推奨事項

• 適切なモードを選択する：新しいプロジェクトには Framework モード、バンドルを制御する必要がある場合は Data モード、シンプルなルーティングには Declarative モードを使用します
• Framework モードでは、コード分割の自動化と型安全性のために Route Module API を使用する
• Suspense によるストリーミングには、ローダーから Promise を返す
• 画面遷移を伴わないフォーム送信や並行データ読み込みには、フェッチャーを使用する
• エラーを適切に捕捉するため、ルートモジュールで ErrorBoundary をエクスポートする
• 認証やログ記録などの横断的な関心事には、ミドルウェアを使用する
• 生成された Route 型を使って、Framework モードの型安全性を活用する
• 命令的なナビゲーション（useNavigate）より宣言的なナビゲーション（Link、NavLink、Form）を優先する