fix-bug

React Router のバグを修正する

以下の GitHub issue で報告されたバグを修正します: $ARGUMENTS

ブランチ作成

バグ修正はクリーンな作業ツリーから開始する必要があります。変更がある場合は、続行する前にそれらを解決するよう促してください。

バグは main ブランチから新しいブランチで修正し、{author}/{semantic-branch-name} の形式を使用します（例: brophdawg11/fix-navigation）:

git branch {author}/{semantic-branch-name} main
git checkout {author}/{semantic-branch-name}

ワークフロー

1. issue を取得して理解する

gh issue view <number> --repo remix-run/react-router または WebFetch を使用して、issue 全体を読みます。

以下を抽出します:

• バグの説明と、期待される動作 vs 実際の動作
• React Router のバージョンとモード（Declarative / Data / Framework / RSC）
• issue 内のコードスニペット
• 再現へのリンク（StackBlitz、CodeSandbox、GitHub リポジトリなど）

2. 再現を検証する

StackBlitz/CodeSandbox/オンラインサンドボックスのリンクがある場合:

• WebFetch を使用してサンドボックスの URL を読み、関連するコードを抽出します
• バグを引き起こす正確なイベントの順序を特定します

GitHub リポジトリのリンクがある場合:

• WebFetch を使用して、raw GitHub URL から主要なファイル（package.json、関連するソースファイル）を読みます
• 関係するルート設定、loader、action、またはコンポーネントを特定します

再現リンクが存在しない場合:

• gh issue view <number> --repo remix-run/react-router --comments で issue のコメントを検索します
• コメント内のコードスニペットを探します
• ユーザーに尋ねます: 「再現が提供されていません。最小限の再現を共有するか、関連するコードを貼り付けていただけますか？」

3. 影響を受けるコードを特定する

バグに基づいて、関連するソースファイルを特定します。主要ファイルのマップを参照してください:

領域	ファイル
コアのルーターロジック	packages/react-router/lib/router/router.ts
React コンポーネント/フック	packages/react-router/lib/components.tsx, lib/hooks.tsx
DOM ユーティリティ	packages/react-router/lib/dom/
Vite/フレームワークプラグイン	packages/react-router-dev/vite/plugin.ts
RSC	packages/react-router/lib/rsc/

Grep と Glob を使用して、関連するコードパスをたどります。

4. 失敗するテストを書く

ユニットテスト（ルーターロジック、フック、純粋なコンポーネントの動作向け — ビルド不要）:

• 場所: packages/react-router/__tests__/
• Jest を使用します。実行コマンド: pnpm test packages/react-router/__tests__/<file>
• 近くのテストファイルのスタイルに合わせます（describe/it ブロック、createStaticHandler、createMemoryRouter、render、screen など）

統合テスト（Vite プラグイン、SSR、ハイドレーション、Framework モード向け）:

• 場所: integration/
• Playwright を createFixture() → createAppFixture() → PlaywrightFixture とともに使用します
• 実行コマンド: pnpm test:integration:run --project chromium integration/<file>
• 必要に応じて先にビルドします: pnpm test:integration --project chromium

バグを正確に再現するテストを書きます — 修正前は失敗する必要があります。

実行して失敗することを確認します:

pnpm test packages/react-router/__tests__/<file>  # unit
# or
pnpm test:integration:run --project chromium integration/<file>  # integration

5. 修正を実装する

• バグを修正するために必要な最小限の変更を行います
• 無関係なコードのリファクタリングは行いません
• 修正が症状だけでなく根本原因に対処していることを確認します
• 5 つのモードすべてを考慮します: この修正は Declarative / Data / Framework / RSC のいずれかで問題を引き起こしませんか？

失敗するテストをもう一度実行します — 今度は成功する必要があります:

pnpm test packages/react-router/__tests__/<file>

より広範なテストスイートを実行して、リグレッションがないか確認します:

pnpm test packages/react-router/

修正が Framework/Vite のコードに触れる場合は、統合テストも実行します:

pnpm test:integration:run --project chromium

リンティングと型チェックが成功することを確認します:

pnpm lint
pnpm typecheck

6. チェンジファイルを作成する

packages/<package>/.changes/<type>.<unique-meaningful-name>.md にチェンジファイルを作成します。<type> は、行われる API 変更の種類を示すために patch、minor、major、または unstable のいずれかにする必要があります。

形式:

fix: <brief description of what was fixed>

7. 結果を報告する

以下を要約してください:

• バグが何であったか、なぜ発生したか
• どのコードが変更されたか、なぜ変更されたか
• テストが今は通ること
• 気づいたエッジケースや関連する問題

私に変更のレビューを依頼し、フィードバックに基づいて反復してください。

8. PR を作成する

私が修正を承認したら、変更をコミットし、main への PR を作成してください。説明に Closes #NNNN を含めて、PR を元のイシューにリンクしてください。また、Development サイドバーでイシューをリンクしてください