react-router-code-review

React Router コードレビュー

クイックリファレンス

問題の種類	リファレンス
データ取得に useEffect を使用、ローダーがない、パラメーターの問題	references/data-loading.md
Form と useFetcher の使い分け、アクションのパターン	references/mutations.md
エラーバウンダリーがない、errorElement	references/error-handling.md
navigate() と Link の使い分け、保留中の状態	references/navigation.md

レビューチェックリスト

• データを useEffect ではなく loader で読み込んでいる
• ルートパラメーターを型安全に検証してからアクセスしている
• 適切な場合に、並列データ取得に defer() を使用している
• ミューテーションに手動の fetch ではなく <Form> または useFetcher を使用している
• アクションが成功時とエラー時の両方を処理している
• ルートに errorElement を使ったエラーバウンダリーがある
• エラーの種類を確認するために isRouteErrorResponse() を使用している
• 可能な場合、ナビゲーションに navigate() ではなく <Link> を使用している
• useNavigation() または fetcher.state を使って保留中の状態を表示している
• レンダリング中にナビゲーションしていない（エフェクトまたはハンドラー内でのみ実行している）

有効なパターン（問題として報告しない）

以下は React Router の正しい使用パターンです。問題として報告しないでください。

• クライアント専用データに対する useEffect - ローダーはサーバー側で実行されます。localStorage、ウィンドウのサイズ、ブラウザー API には useEffect を使用する必要があります
• イベントハンドラー内の navigate() - Link は宣言的なナビゲーションに使用します。コールバック／ハンドラー内で命令的にナビゲーションする場合は navigate() が適切です
• ローダーデータへの型注釈 - useLoaderData<typeof loader>() は型注釈であり、型アサーションではありません
• ルートレベルで空の errorElement - ルートが意図的に親のエラーバウンダリーに依存している場合があります
• action プロパティのない Form - 規約に従い現在の URL に送信します。action の明示は任意です
• null を返す loader - データが存在しない場合に有効です。null は正当なローダーの戻り値です
• fetcher.state を確認せずに fetcher.data を使用する - 再検証中に古いデータを許容する場合は、意図的なことがあります

コンテキストに応じたルール

具体的な状況に該当する場合のみ、以下の問題を指摘してください。

問題	次の場合にのみ指摘
ローダーがない	データがサーバー側で利用可能な場合（クライアント専用ではない）
データ取得に useEffect を使用	データがクライアント専用ではない場合（localStorage、ブラウザー API、ウィンドウサイズではない）
errorElement がない	階層内の親ルートにエラーバウンダリーがない場合
Link の代わりに navigate() を使用	イベントハンドラーや条件付きロジックによってナビゲーションが実行されるのではない場合

ゲート（問題を報告する前に実施）

順番に実行してください。直感だけに頼らず、根拠（パス、行番号、またはコードからの一行引用）を示して各ゲートを通過してください。

ゲート 1 — ルートの範囲を特定する

通過条件： レビュー対象の動作を担うルートモジュール、routes 設定項目、またはレイアウトのリポジトリパスを特定していること（問題を指摘する前にメモに記載してください）。

ゲート 2 — コンテキストに応じた条件の確認

通過条件： コンテキストに応じたルールに該当するすべての問題について、コードに結び付いた一行の根拠で 次の場合にのみ指摘 の条件を満たしていること。それ以外のチェックリスト項目については、具体的なコードの引用（パスと行番号、または短い抜粋）があること。

ゲート 3 — 問題ではないパターン

通過条件： その動作が、該当するカテゴリの**有効なパターン（問題として報告しない）**に含まれていないこと。

ゲート 4 — 検証プロトコル

review-verification-protocol を読み、従ってください。通過条件： 出力する各指摘について、報告前チェックリスト（および該当する問題の種類別サブセクション）を完了していること。

リファレンスを読み込むタイミング

• データ取得コードをレビューする → data-loading.md
• フォームまたはミューテーションをレビューする → mutations.md
• エラーハンドリングをレビューする → error-handling.md
• ナビゲーションロジックをレビューする → navigation.md

レビューの質問

1. データの読み込みには、エフェクトではなくローダーが使われていますか？
2. ミューテーションにはフォーム／アクションパターンが使われていますか？
3. 適切なルート階層にエラーバウンダリーが設置されていますか？
4. ナビゲーションは Link コンポーネントを使って宣言的に行われていますか？
5. 処理中の状態は適切に扱われていますか？