Home › React Router / Remix › React Router 7 framework mode rules

React Router 7 framework mode rules

Cursor rules for React Router 7 in framework mode (the Remix successor): loaders, actions, and type-safe routes.

CursorReact Router / Remix

How to use

Save this as .cursor/rules/react-router.mdc in your repository root, commit it, and your agent will pick it up automatically. Edit the commands to match your project.

---
description: React Router 7 framework mode conventions
globs: ["app/**/*.{ts,tsx}"]
alwaysApply: false
---

# React Router 7 (framework mode)

- Routes are declared in `app/routes.ts` using `route()`, `index()`, `layout()` and `prefix()`. Add a file and register it there; don't assume file-based routing unless `@react-router/fs-routes` is set up.
- Import generated types per route: `import type { Route } from "./+types/<name>"` and type `loader`, `action`, and the component with `Route.LoaderArgs`, `Route.ComponentProps`.
- Read data in `loader` (server) or `clientLoader` (browser only). Mutations go in `action` and are triggered by `<Form method="post">` or `useFetcher()`, not by `fetch` in an effect.
- Return plain objects from loaders; use `data(value, { status })` for status codes and `redirect()` for navigation. `json()` and `defer()` are legacy.
- Validate `formData` and params on the server (zod or the project's validator) and return field errors from the action.
- Pending UI from `useNavigation()` / `fetcher.state`; optimistic UI from `fetcher.formData`.
- Every route that can fail exports an `ErrorBoundary`. Set `meta` per route.
- Server-only code lives in `*.server.ts` files so it never ships to the client.

## Don't
- Don't import from `@remix-run/*` or `react-router-dom`; use `react-router`.
- Don't put secrets or DB clients in modules imported by components.

## Done when
`npm run typecheck` (runs `react-router typegen`) and `npm run build` pass.