React Router V7

Cursor-Regel für React Router v7: Routing, Loader/Actions und Datenlade-Patterns.

Original-Beschreibung der Autoren: React Router v7 rules for framework mode, data routers, loaders, actions, route modules, and progressive enhancement

Die Regel

---
description: React Router v7 rules for framework mode, data routers, loaders, actions, route modules, and progressive enhancement
globs: ["app/routes/**/*", "src/routes/**/*", "routes/**/*", "react-router.config.*", "vite.config.*", "**/*.tsx", "**/*.ts"]
alwaysApply: false
---

# React Router v7 Rules

## Route Modules

- Use route modules as the boundary for route UI, loader data, actions, metadata, and error boundaries.
- Keep route modules small; move shared UI to components and reusable data access to services.
- Prefer file-based routing in framework mode when the project is configured for it.
- Use nested routes for shared layouts and progressive disclosure.
- Export route-specific `ErrorBoundary` components for recoverable route failures.

## Data Loading

- Use loaders for route data that should be available before render.
- Keep loaders deterministic and side-effect free.
- Validate params and search params at the loader boundary.
- Return typed data and consume it through route hooks rather than duplicating fetch logic in components.
- Use deferred or streaming patterns only when they improve perceived performance.

## Mutations

- Use actions for route mutations and form submissions.
- Prefer `Form`, `useFetcher`, and `useSubmit` for progressive enhancement.
- Revalidate affected loader data after mutations.
- Handle validation errors as typed action data instead of generic exceptions.
- Keep server-only secrets and privileged operations out of client actions.

## Navigation and State

- Store shareable state in URL params or search params.
- Keep ephemeral UI state local to components.
- Use pending navigation state to show optimistic or loading UI.
- Avoid global state for data that belongs to route loaders.

## TypeScript and Testing

- Type loader and action return values.
- Add tests for route loaders, actions, validation failures, and error boundaries.
- Use integration tests for critical form and navigation flows.
- Mock network and persistence at the route-service boundary.

## Common Mistakes

- Do not duplicate loader fetches in `useEffect`.
- Do not mutate data in loaders.
- Do not hide route errors behind a single generic app-level catch-all.
- Do not put auth checks only in components when loader data is protected.

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Diese Regel gibt Konventionen für React Router v7 vor, insbesondere für Loader- und Action-Funktionen sowie Datenlade-Patterns, die in v7 gegenüber älteren Versionen (z. B. v6) teils anders funktionieren. Nützlich, weil sich Router-APIs zwischen Versionen häufig ändern und generierte Vorschläge sonst leicht veraltete Patterns verwenden. Wer bereits mit Remix oder React Router v6.4+ gearbeitet hat, findet ähnliche Konzepte, muss aber auf v7-spezifische Details achten. Für Projekte mit serverseitigem Data-Loading oder Formularen über Actions ist diese Regel besonders relevant, für rein clientseitiges Routing ohne Loader weniger.

Praxis-Tipp

Gezielt nach v7-Pattern fragen, z. B. ‘Erstelle eine Route mit Loader und Action für ein Kommentarformular nach React Router v7’, damit keine veralteten v6-Syntaxen erzeugt werden.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …