Fix a reported bug in React Router from a GitHub issue. Use when the user provides a GitHub issue URL and asks to fix a bug, investigate an issue, or reproduce a problem. Handles the full workflow: fetching the issue, finding the reproduction, writing a failing test, and implementing the fix.
Fix the bug reported in the following GitHub issue: $ARGUMENTS
Bug fixes should start from a clean working tree. If there are changes, prompt me to resolve them before continuing.
Bugs should be fixed from the dev branch in in a new branch using the format {author}/{semantic-branch-name} (i.e., brophdawg11/fix-navigation):
git branch {author}/{semantic-branch-name} dev
git checkout {author}/{semantic-branch-name}
Use gh issue view <number> --repo remix-run/react-router or WebFetch to read the full issue.
Extract:
If there's a StackBlitz/CodeSandbox/online sandbox link:
WebFetch to read the sandbox URL and extract the relevant codeIf there's a GitHub repository link:
WebFetch to read key files (package.json, relevant source files) from the raw GitHub URLIf no reproduction link exists:
gh issue view <number> --repo remix-run/react-router --commentsBased on the bug, locate the relevant source files. Consult the key file map:
| Area | Files |
|---|---|
| Core router logic | packages/react-router/lib/router/router.ts |
| React components/hooks | packages/react-router/lib/components.tsx, lib/hooks.tsx |
| DOM utilities | packages/react-router/lib/dom/ |
| Vite/Framework plugin | packages/react-router-dev/vite/plugin.ts |
| RSC | packages/react-router/lib/rsc/ |
Use Grep and Glob to trace the relevant code paths.
Unit test (for router logic, hooks, pure component behavior — no build needed):
packages/react-router/__tests__/pnpm test packages/react-router/__tests__/<file>createStaticHandler, createMemoryRouter, render, screen, etc.)Integration test (for Vite plugin, SSR, hydration, Framework Mode):
integration/createFixture() → createAppFixture() → PlaywrightFixturepnpm test:integration:run --project chromium integration/<file>pnpm test:integration --project chromiumWrite the test to reproduce the bug exactly — it must fail before the fix.
Run it and confirm it fails:
pnpm test packages/react-router/__tests__/<file> # unit
# or
pnpm test:integration:run --project chromium integration/<file> # integration
Run the failing test again — it must now pass:
pnpm test packages/react-router/__tests__/<file>
Run the broader test suite to check for regressions:
pnpm test packages/react-router/
If the fix touches Framework/Vite code, run integration tests too:
pnpm test:integration:run --project chromium
Confirm linting and typechecking pass:
pnpm lint
pnpm typecheck
Create a change file at packages/<package>/.changes/<type>.<unique-meaningful-name>.md. <type> should be either patch, minor, major or unstable to indicate the type of API change being made.
Format: