React Router 7

Pathrule2 Rules • 2 Memories • 1 Skill

React Router 7 merges Remix into a single multi-strategy router with a full framework mode for SSR, data loading, and mutations. This pattern keeps your data flow on loaders and actions, your routes type-safe through codegen, and your navigation fast with single-fetch and prefetching. It is tuned for the 7.17+ API surface and the framework-mode conventions teams ship in 2026.

Suggested path map

Pathrule places each piece on the matching path, so your assistant only sees it where it belongs. This is the scoping you get on import; you can adjust it in your workspace.

/ workspace root

react-router-review

app/

Framework mode data flow and single-fetch

routes/

Load and mutate through loaders and actions

Use generated Route types, not hand-written ones

Prefetch, navigation, and progressive enhancement

Rules

Load and mutate through loaders and actions/app/routeshighadvisoryRoute data comes from loaders; mutations go through actions, never useEffect or ad-hoc fetch.

1	In framework mode, route data and mutations live on the route module, not in component effects.
2
3	- Read data with `loader` (server) or `clientLoader` (browser); never fetch in `useEffect` for route data.
4	- Mutate with `action` / `clientAction` submitted via `<Form>` or `useSubmit`, not `fetch` in click handlers.
5	- After an action resolves, all page loaders revalidate automatically. Do not manually refetch.
6	- Put server-only secrets and DB calls in `loader`/`action`; they are stripped from the client bundle.

Use generated Route types, not hand-written ones/app/routeshighadvisoryImport the per-route Route namespace for params, loaderData, and actionData typing.

1	React Router codegen emits a typed `Route` namespace per route file; use it instead of casting.
2
3	- Import with `import type { Route } from './+types/route-name'` and type args as `Route.LoaderArgs`, `Route.ActionArgs`, `Route.ComponentProps`.
4	- Read `params`, `loaderData`, and `actionData` from those typed props rather than `useParams()` casts.
5	- Keep `react-router typegen` (or `dev`) running so `.react-router/types/` stays current; do not edit generated files.
6	- Define routes in `app/routes.ts` with the config helpers so codegen and the type map stay in sync.

Memories

Framework mode data flow and single-fetch/appHow loaders, actions, revalidation, and single-fetch fit together in RR7 framework mode.

1	Framework mode (the Remix-merged full-stack setup) drives the data lifecycle from route modules.
2
3	- One navigation triggers a single HTTP request (single-fetch) that resolves every matched route's loader together; avoid waterfalling per-component fetches.
4	- `clientLoader` can hydrate the initial SSR render by exporting `clientLoader.hydrate = true`; otherwise it runs on client navigations.
5	- Streaming defer happens by returning promises from a loader and resolving them with `<Await>` / `useAsyncValue` so the shell renders immediately.
6	- Stable on `react-router` 7.17.x; the legacy `react-router-dom` package is folded into `react-router`.

Prefetch, navigation, and progressive enhancement/app/routesLink prefetch modes, Form-based mutations, and graceful no-JS behavior.

1	Navigation and forms are built to work before and after hydration.
2
3	- Set `<Link prefetch="intent">` for hover/focus prefetch, `"viewport"` for in-view, `"render"` for eager; prefetch uses `<link rel="prefetch">` tags.
4	- Use `<Form method="post">` so submissions work without JS; `useNavigation()` / `useFetcher()` give pending UI once hydrated.
5	- `useFetcher` handles non-navigation mutations (likes, inline edits) without changing the URL and still revalidates affected loaders.
6	- Throw `redirect()` or `data()` from loaders/actions for control flow instead of imperatively navigating in effects.

Skills

react-router-review/rootPre-merge checklist for React Router 7 framework mode routes, loaders, and actions.

1	---
2	name: react-router-review
3	description: Review a React Router 7 framework-mode route before merging. Use when adding or changing route modules, loaders, actions, or app/routes.ts.
4	---
5
6	# React Router 7 review
7
8	- [ ] Route data is read via `loader` / `clientLoader`, not `useEffect` fetches
9	- [ ] Mutations go through `action` / `clientAction` submitted with `<Form>` or `useFetcher`, not raw `fetch` in handlers
10	- [ ] Args and props use generated `Route.LoaderArgs` / `Route.ActionArgs` / `Route.ComponentProps` from `./+types/...`
11	- [ ] `params`, `loaderData`, `actionData` come from typed props, not `useParams()` casts
12	- [ ] Server-only code (secrets, DB) stays inside `loader`/`action` and out of the client bundle
13	- [ ] Route is registered in `app/routes.ts` and codegen (`.react-router/types/`) is up to date
14	- [ ] Redirects use `redirect()` thrown from loaders/actions, not imperative navigation in effects
15	- [ ] `<Link>` uses an appropriate `prefetch` mode for hot navigations
16	- [ ] Slow data is deferred with promises + `<Await>` instead of blocking the whole route
17	- [ ] Errors are handled with an exported `ErrorBoundary` / `meta` where needed

Why this pattern

Agents write React Router 7 like v6 SPAs, fetching in effects and ignoring loaders, actions, and generated route types.

Built for Teams building full-stack React apps on React Router 7 framework mode.

Keeps your assistant from:

Fetching data in useEffect instead of route loaders
Hand-typing route params and loaderData instead of using generated Route types
Mutating data with fetch in event handlers instead of route actions

View as markdown

License: Apache-2.0
Version: 1.0.0
Updated: 2026-06-09