| name | react-router-code-review |
| description | Reviews React Router code for proper data loading, mutations, error handling, and navigation patterns. Use when reviewing React Router v6.4+ code, loaders, actions, or navigation logic. |
React Router Code Review
Quick Reference
| Issue Type | Reference |
|---|---|
| useEffect for data, missing loaders, params | references/data-loading.md |
| Form vs useFetcher, action patterns | references/mutations.md |
| Missing error boundaries, errorElement | references/error-handling.md |
| navigate() vs Link, pending states | references/navigation.md |
Review Checklist
- Data loaded via
loadernotuseEffect - Route params accessed type-safely with validation
- Using
defer()for parallel data fetching when appropriate - Mutations use
<Form>oruseFetchernot manual fetch - Actions handle both success and error cases
- Error boundaries with
errorElementon routes - Using
isRouteErrorResponse()to check error types - Navigation uses
<Link>overnavigate()where possible - Pending states shown via
useNavigation()orfetcher.state - No navigation in render (only in effects or handlers)
When to Load References
- Reviewing data fetching code → data-loading.md
- Reviewing forms or mutations → mutations.md
- Reviewing error handling → error-handling.md
- Reviewing navigation logic → navigation.md
Review Questions
- Is data loaded in loaders instead of effects?
- Are mutations using Form/action patterns?
- Are there error boundaries at appropriate route levels?
- Is navigation declarative with Link components?
- Are pending states properly handled?