react-router

name	react-router
description	React Router V7 patterns for loaders, actions, forms, routes, middleware, and error handling. Use when writing or reviewing React Router code.

React Router

Act as a senior React Router engineer reviewing code for correctness, performance, and best practices.

Review: $ARGUMENTS

ReactRouter { Loaders { Fetch all data in loaders, never in components with useEffect. Loaders run before render and eliminate loading spinners. Use Promise.all for independent data fetches within a loader to avoid sequential waterfalls. Use request-scoped caching (via context) so multiple loaders can call the same data function without duplicate requests. Control revalidation with shouldRevalidate to skip unnecessary refetches. Use useRevalidator for polling/focus patterns. Type loaders with Route.LoaderArgs and consume with useLoaderData<typeof loader>(). Validate URL params early with zod or invariant — don't trust params to be well-formed. Pass request.signal to fetch calls and database queries so they abort when the user navigates away. Colocate data queries in queries.server.ts next to the route file. }

Actions { Validate all form data with zod schemas. Return validation errors with data({ errors }, { status: 400 }) — don't throw for validation failures. Use throw redirect("/path") after successful mutations to prevent resubmission (Post/Redirect/Get). Use zod .transform() for input sanitization (trim, lowercase, parse numbers) during validation. Use z.discriminatedUnion("intent", [...]) to handle multiple actions in one route with type-safe intent matching. Use clientAction for instant client-side validation before hitting the server. Re-throw redirects and unknown errors in catch blocks — only catch expected error types. }

Forms { Use useFetcher for in-place mutations (likes, toggles, inline edits) that shouldn't trigger navigation. Use <Form> when the mutation should navigate. Show pending state with fetcher.state !== "idle" or useNavigation().state. Use useSpinDelay to avoid flicker. Reset uncontrolled forms on success with formRef.current?.reset() in an effect. Return field values from actions on validation error so inputs repopulate with defaultValue={actionData?.fields?.email}. Add <HoneypotInputs /> to public-facing forms for bot protection. }

Routing { Organize routes as folders with colocated queries.server.ts, actions.server.ts, route.tsx, and components/. Use resource routes (no default export) for API-like endpoints. Name them api.<resource>.tsx. Use dedicated action routes (actions.<noun>-<verb>.ts) for reusable mutations consumed by multiple pages via useFetcher. Name the default export Component in all route files. Never import from other route files — import shared modules instead. Exception: import type { action } for useFetcher type inference. Access parent route data with useRouteLoaderData in UI. In loaders, re-fetch (request-scoped caching prevents duplicate calls). }

Middleware { Authenticate in middleware, authorize in each loader/action. Keep auth checks close to data access. Store session in middleware so loaders/actions get a single instance per request. Use AsyncLocalStorage for request-scoped context accessible without passing args through every function. Add Server-Timing headers in middleware for performance observability. Generate a request ID in middleware for log correlation across the request lifecycle. }

Security { Protect mutations with CSRF tokens or verify Sec-Fetch-Site headers to reject cross-site requests. Sanitize user-driven redirect URLs with safeRedirect(redirectTo, "/") — never redirect to arbitrary user input. Apply CORS headers only to API resource routes that need cross-origin access. Use specific origins, not wildcards. Validate cookie payloads with schemas using typed cookies. Use prefetch="intent" on <Link> for faster navigation — preloads data on hover/focus. }

ErrorHandling { Export ErrorBoundary from every route with data fetching. Use isRouteErrorResponse to distinguish HTTP errors from unexpected exceptions. In layout routes, make ErrorBoundary layout-aware so errors render within the app shell. Use <Suspense> with <Await resolve={promise}> for streamed loader data — return promises from data() and they auto-stream. } }