⚡

// Skill profile

React Router Code Review

Name: React Router Code Review
Author: anderskev

name: react-router-code-review

by anderskev · published 2026-04-01

开发工具数据处理

Total installs

Stars

★ 0

Last updated

2026-04

// Install command

$ claw add gh:anderskev/anderskev-react-router-code-review

View on GitHub

// Full documentation

---

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](references/data-loading.md) |

| Form vs useFetcher, action patterns | [references/mutations.md](references/mutations.md) |

| Missing error boundaries, errorElement | [references/error-handling.md](references/error-handling.md) |

| navigate() vs Link, pending states | [references/navigation.md](references/navigation.md) |

Review Checklist

[ ] Data loaded via `loader` not `useEffect`

[ ] Route params accessed type-safely with validation

[ ] Using `defer()` for parallel data fetching when appropriate

[ ] Mutations use `<Form>` or `useFetcher` not manual fetch

[ ] Actions handle both success and error cases

[ ] Error boundaries with `errorElement` on routes

[ ] Using `isRouteErrorResponse()` to check error types

[ ] Navigation uses `<Link>` over `navigate()` where possible

[ ] Pending states shown via `useNavigation()` or `fetcher.state`

[ ] No navigation in render (only in effects or handlers)

Valid Patterns (Do NOT Flag)

These patterns are correct React Router usage - do not report as issues:

**useEffect for client-only data** - Loaders run server-side; localStorage, window dimensions, and browser APIs must use useEffect

**navigate() in event handlers** - Link is for declarative navigation; navigate() is correct for imperative navigation in callbacks/handlers

**Type annotation on loader data** - `useLoaderData<typeof loader>()` is a type annotation, not a type assertion

**Empty errorElement at route level** - Route may intentionally rely on parent error boundary

**Form without action prop** - Posts to current URL by convention; explicit action is optional

**loader returning null** - Valid when data may not exist; null is a legitimate loader return value

**Using fetcher.data without checking fetcher.state** - May be intentional when stale data is acceptable during revalidation

Context-Sensitive Rules

Only flag these issues when the specific context applies:

| Issue | Flag ONLY IF |

|-------|--------------|

| Missing loader | Data is available server-side (not client-only) |

| useEffect for data fetching | Data is NOT client-only (localStorage, browser APIs, window size) |

| Missing errorElement | No parent route in the hierarchy has an error boundary |

| navigate() instead of Link | Navigation is NOT triggered by an event handler or conditional logic |

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

1. Is data loaded in loaders instead of effects?

2. Are mutations using Form/action patterns?

3. Are there error boundaries at appropriate route levels?

4. Is navigation declarative with Link components?

5. Are pending states properly handled?

Before Submitting Findings

Load and follow [review-verification-protocol](../review-verification-protocol/SKILL.md) before reporting any issue.

// Comments

// Related skills

More tools from the same signal band

Order food/drinks (点餐) on an Android device paired as an OpenClaw node. Uses in-app menu and cart; add goods, view cart, submit order (demo, no real payment).

Sign plugins, rotate agent credentials without losing identity, and publicly attest to plugin behavior with verifiable claims and authenticated transfers.

The philosophical layer for AI agents. Maps behavior to Spinoza's 48 affects, calculates persistence scores, and generates geometric self-reports. Give your...

日历管理数据处理

1 installs★ 0