remix-v2-routing-review

Remix v2 ルーティングのコードレビュー

app/routes/ モジュール内のルーティングに関するアンチパターンを検出するため、review-remix-v2（包括スキル）から読み込まれます。標準的なパターンについては、remix-v2-routingを参照してください。

クイックリファレンス

問題の種類	参照先
ファイル名の問題（index.tsx、__auth、誤ったエスケープ、ルート以外のファイル）	references/route-files.md
<Outlet /> の欠落、親のないドット区切りセグメント、重複したレイアウトロジック	references/layouts-outlets.md
リソースルートでのデフォルトエクスポート、reloadDocument のない <Link>、スプラットパラメーター	references/resource-routes.md
react-router-dom のインポート、__double フォルダー、v1 アダプターへのフォールバック	references/v1-holdovers.md
<Meta />／<Links />／<Scripts />／<ScrollRestoration /> の欠落、Vite と Classic における <LiveReload /> の違い、ドキュメントシェルのないルート ErrorBoundary	references/root-shell.md

対象範囲

このスキルでは、以下の問題を検出します。

• app/routes/ 配下のファイル（ファイル名、エクスポート、インポート、JSX の構造）
• app/root.tsx（ドキュメントシェル、ルート <Outlet />）
• remix.config.js（ルートの検出方法を変更する設定：routes()、ignoredRouteFiles、@remix-run/v1-route-convention）
• リソースルートへのリンクを含むすべてのモジュール（<Link> の使用）

対象外：loader/action のデータコントラクト（remix-v2-data-flow-review の対象）、フォームの動作（remix-v2-forms-review の対象）、メタデータ／ヘッダー（remix-v2-meta-sessions-review の対象）。

レビューチェックリスト

• インデックスルートの名前は index.tsx ではなく _index.tsx
• パスレスレイアウトにはダブルアンダースコア（__auth/）ではなく、シングルアンダースコア（_auth.tsx）を使用する
• ドット区切りの子ルート（users.profile.tsx）には親モジュールがあるか、末尾にアンダースコアを付ける（users_.profile.tsx）
• 親ルートモジュールで <Outlet /> をレンダリングしている
• スプラットセグメントでは params.splat／params.rest ではなく、params["*"] を参照している
• ドットなどの特殊文字はブラケットでエスケープしている（sitemap[.]xml.tsx）
• リソースルートに default エクスポートがない
• リソースルートへの <Link> では reloadDocument を使用している（または通常の <a> を使っている）
• インポート元が react-router-dom ではなく @remix-run/react
• ルート以外のファイル（CSS、ヘルパー、テスト）は、route.tsx のあるフォルダーに置くか、ignoredRouteFiles に記載している
• 末尾のアンダースコアによる除外は、除外対象となる親レイアウトが実際に存在する場合にのみ使用している
• オプションのセグメント ($lang) を使う場合、loader で params.lang を絞り込んでいる（references/route-files.mdを参照）

有効なパターン（検出しないこと）

• default エクスポートのないリソースルート — これがリソースルートにするための規約です。検出しないでください。
• <Outlet /> のない _ で始まるパスレスレイアウトファイルで、モジュールが固定 UI のみをレンダリングするラッパーとして意図的に使われている場合。子ルートを確認してください。*.{segment}.tsx の兄弟ファイルがなければ、ラッパーのみの構成は意図的なものです。
• URL に表示されない、_ で始まるファイル — パスレスレイアウトと _index は、URL に表示されない仕様です。
• remix.config.js で設定された @remix-run/v1-route-convention — 正当な移行アダプターであり、それ自体は問題ではありません。アダプターを導入せずに v1 形式のファイルがある場合にのみ検出してください。
• useLoaderData<typeof loader>() — 型注釈であり、型アサーションではありません。
• ブラケット構文で params["*"] にアクセスするスプラットルート — これが唯一正しいアクセス方法です。
• route.tsx と、兄弟ファイルの .server.ts、.css、コンポーネントファイルを含む app/routes/dashboard/ フォルダー — これはドキュメントに記載されたファイルの同居パターンです。
• 兄弟ファイルに concerts.tsx レイアウトがあり、この URL では意図的にそれをスキップする場合の末尾のアンダースコア（concerts_.mine.tsx）

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

以下の問題は、該当するコンテキストの場合にのみ指摘してください。

問題	次の場合にのみ指摘
app/routes/ 配下の index.tsx	プロジェクトが v2 で、remix.config.js に @remix-run/v1-route-convention が設定されていない
<Outlet /> のない親モジュール	app/routes/ に兄弟のドット区切りの子（parent.*.tsx）が存在する
__double アンダースコアのフォルダー	v1 規約アダプターがインストールされていない
末尾にアンダースコアが付いたセグメント	対応する親レイアウトが存在しない（オプトアウトする対象がない）
HTML 以外を返すモジュールのデフォルトエクスポート	ローダー／アクションが実際に生の Response（PDF、JSON、RSS）を返す
リソースルートへの <Link>	対象ルートに default エクスポートがなく、かつ <Link> に reloadDocument がない

ハードゲート（指摘事項を作成する前に実施）

以下を順番に実行してください。報告する対象のすべてについて、すべてのゲートを通過するまで、ユーザー向けの指摘事項を作成しないでください。

1. 場所の証拠 — 合格条件： 各問題について、リポジトリ内のパス（app/routes/ 配下のファイル、または remix.config.js）と、行の範囲または読んだファイルからの短い逐語引用を記載してください。ファイル名だけで判断する場合は、文字どおりのファイル名を引用してください。

2. 免除事項の確認 — 合格条件： 各問題について、有効なパターン（指摘しない） の対象ではない理由を1行で記載してください。リソースルートに関する指摘には、default エクスポートがあること、または <Link> に reloadDocument がないことの明示的な証拠が必要です。

3. バージョンの確認 — 合格条件： プロジェクトが Remix v2 であることを確認してください（package.json の @remix-run/react ^2 を確認するか、または app/routes/ 内の別の場所に v2 のフラットルート形式のファイル名があることを確認します）。remix.config.js に @remix-run/v1-route-convention が設定されている場合、v1 のファイル名（__auth/、index.tsx）は意図的なものです。問題として指摘しないでください。

4. プロトコル — 合格条件： このレビューについて、review-verification-protocol の「報告前の検証チェックリスト」を完了してください。

参考資料を読み込むタイミング

• app/routes/ 配下のファイル名をレビューする場合 → references/route-files.md
• 親モジュールと共有クロームをレビューする場合 → references/layouts-outlets.md
• HTML 以外を返すモジュール、またはそのようなモジュールへの <Link> をレビューする場合 → references/resource-routes.md
• v1 のように見えるインポートやファイル名をレビューする場合 → references/v1-holdovers.md
• app/root.tsx（ドキュメントシェル、<Meta />／<Links />／<Scripts />／<ScrollRestoration />、Vite と Classic Compiler における <LiveReload />、ルートの ErrorBoundary）をレビューする場合 → references/root-shell.md

レビューの質問

1. すべての親ルートで <Outlet /> をレンダリングしていますか。それとも、意図的にラッパーのみとしていますか？
2. ファイル名は v2 の文法（パスレスには単一の _、インデックスには _index、エスケープには [...]）に従っていますか？
3. リソースルートに default エクスポートはなく、リソースルートへのすべての <Link> で reloadDocument を使用していますか？
4. すべてのルーターのインポート元は @remix-run/react で、サーバーヘルパーのインポート元は @remix-run/node ですか？
5. v1 のファイル名が存在する場合、@remix-run/v1-route-convention が設定されていますか。それとも、誤って残っていますか？

追加ドキュメント

• ルートファイル名に関する問題：references/route-files.md — index.tsx、__double フォルダー、誤ったエスケープ構文、ドットとアンダースコアの混同、app/routes/ 配下のルート以外のファイル。
• レイアウトとアウトレット：references/layouts-outlets.md — パスレスレイアウトの誤用、<Outlet /> の欠落、孤立したドット区切りの子、レイアウトロジックの重複。
• リソースルート：references/resource-routes.md — 意図しないデフォルトエクスポート、reloadDocument のない <Link>、スプラットの params["*"] アクセス。
• v1 の残存箇所：references/v1-holdovers.md — react-router-dom のインポート、__auth フォルダー、@remix-run/v1-route-convention が意図的か偶発的かを見分ける手がかり。