React Router – Modus-spezifische Routenkonfiguration

React Router

React Router ist modus-spezifisch. Bevor du eine App änderst, identifiziere den Modus, lade die passende Referenz und lies dann die installierte Dokumentation für die installierte Paketversion.

Identifiziere den Modus

Wende Framework/Data-Muster nicht auf eine Declarative-App an, es sei denn, du migrierst absichtlich zwischen den Modi.

Framework-Modus

Verwende die Framework-Modus-Anleitung, wenn du Folgendes siehst:

• @react-router/dev in den Abhängigkeiten
• react-router.config.ts
• app/routes.ts
• app/entry.server.tsx und/oder app/entry.client.tsx-Dateien
• Routenmodule unter app/routes/
• Routenexports wie loader, action, clientLoader, clientAction, ErrorBoundary, meta, links oder headers
• Importe aus ./+types/...
• das React Router Vite-Plugin von @react-router/dev/vite

Framework-Beispiele verwenden normalerweise das Standardverzeichnis app/, überprüfe aber react-router.config.ts auf ein benutzerdefiniertes appDirectory, bevor du genaue Pfade annimmst.

Lies dann references/framework-mode.md.

Data-Modus

Verwende die Data-Modus-Anleitung, wenn du Folgendes siehst:

• createBrowserRouter, createHashRouter, createMemoryRouter oder createStaticRouter
• <RouterProvider router={router}>
• Routenobjekte mit Eigenschaften wie path, children, loader, action, Component, ErrorBoundary oder lazy
• Data-APIs ohne das Framework Vite-Plugin

Lies dann references/data-mode.md.

Declarative-Modus

Verwende die Declarative-Modus-Anleitung, wenn du Folgendes siehst:

• <BrowserRouter>, <HashRouter> oder <MemoryRouter>
• <Routes> und <Route> JSX-Routenkonfiguration
• Routenkomponenten, die mit element={<Component />} übergeben werden
• keinen Data-Router, keine Routenmodul-Konvention und keine Loader/Actions

Lies dann references/declarative-mode.md.

RSC Framework- und RSC Data-Modi

React Server Components-Unterstützung ist instabil und existiert sowohl in Framework- als auch in Data-Varianten. Verwende die RSC-Anleitung, wenn du Folgendes siehst:

• unstable_reactRouterRSC
• @vitejs/plugin-rsc
• unstable_RSCRouteConfig
• RSC-Einstiegsdateien wie entry.rsc
• ServerComponent, ServerErrorBoundary, ServerLayout oder ServerHydrateFallback
• React-Direktiven oder Boundary-Pakete wie "use client", "server-only" oder "client-only"

Für RSC Framework, lies sowohl references/framework-mode.md als auch references/rsc.md. Für RSC Data, lies sowohl references/data-mode.md als auch references/rsc.md.

Verwende installierte Dokumente als Quelle der Wahrheit

React Router liefert Markdown-Dokumente im Paket mit, sodass die Anleitung zur installierten Version passt:

node_modules/react-router/docs/

Wichtige Dokumentenpfade:

node_modules/react-router/docs/index.md
node_modules/react-router/docs/start/
node_modules/react-router/docs/how-to/
node_modules/react-router/docs/explanation/
node_modules/react-router/docs/upgrading/

Wenn diese Fertigkeit auf react-router/docs/... verweist, lies die entsprechende Datei unter node_modules/react-router/docs/. Wenn die installierte Version keine lokalen Dokumente enthält, verwende das Verzeichnis docs/ des Repos, wenn du im React Router-Repository arbeitest; in einer konsumierenden App falle auf die versionsabgestimmte Website-Dokumentation zurück.

Die meisten Dokumente enthalten einen Modus-Marker in der Nähe des Anfangs:

[MODES: framework, data, declarative]

Wende ein Dokument nur an, wenn sein Modus-Marker mit dem App-Modus übereinstimmt. Wenn eine Aufgabe sich über mehrere Modi erstreckt, bevorzuge den Abschnitt oder die Datei, die zum aktuellen App-Modus passt.

RSC wird hauptsächlich dokumentiert in:

node_modules/react-router/docs/how-to/react-server-components.md

Fertigkeits-Referenzen

Lade die relevante Referenz, nachdem du den Modus identifiziert hast:

Referenz	Verwende, wenn
references/framework-mode.md	Framework-Modus oder RSC Framework-Basisverhalten
references/data-mode.md	Data-Modus oder RSC Data-Basisverhalten
references/declarative-mode.md	Declarative-Modus
references/rsc.md	Jede instabile RSC-App

Modus-Migrations-Dokumentenindex

Wenn der Benutzer explizit nach einem Moduswechsel fragt, lies die Zielmodus-Referenz plus die migrationsrelevanten Dokumente:

Migration	Zu lesende Dokumente
Declarative → Data	react-router/docs/start/modes.md, react-router/docs/start/data/routing.md, react-router/docs/start/data/data-loading.md, react-router/docs/start/data/actions.md
Declarative/Data → Framework	react-router/docs/start/modes.md, react-router/docs/start/framework/routing.md, react-router/docs/start/framework/route-module.md, react-router/docs/how-to/route-module-type-safety.md
Framework SPA/SSR/Pre-Render-Änderungen	react-router/docs/start/framework/rendering.md, react-router/docs/how-to/spa.md, react-router/docs/how-to/pre-rendering.md, react-router/docs/start/framework/data-loading.md, react-router/docs/start/framework/actions.md
Future-Flags/Upgrades	react-router/docs/upgrading/future.md und relevante Dateien unter react-router/docs/upgrading/