React Router 7 Beispiele zum Kopieren: Setup in jedem Modus, verschachtelte Layouts, Params, Loader und Actions, geschützte Routen, 404-Seiten, Lazy Routes und der Umstieg von v6.
React Router 7 kommt als ein einziges Paket, react-router. Umschließe deine App für einfaches Routing mit BrowserRouter oder baue Routen mit createBrowserRouter und RouterProvider, um Loader, Actions und Error Boundaries zu nutzen. Verschachtle Kind-Routen unter einem Layout, das Outlet rendert, lies Pfadsegmente mit useParams und Query-Strings mit useSearchParams.
Die APIs, die du am häufigsten brauchst
Jedes Beispiel unten ist für React Router 7 geschrieben und importiert aus react-router. Die kleine Demo oben ist live, du kannst dich also durch verschachtelte Routen und Params klicken; sie läuft mit der Router-Version, die diese Seite verwendet, und ist entsprechend beschriftet.
Nein. In v7 wird alles aus react-router exportiert. react-router-dom lässt sich weiterhin installieren und exportiert dieselbe API erneut, um Upgrades zu erleichtern, neue Projekte brauchen aber nur react-router.
Data Mode ist eine Bibliothek: Du baust das Routen-Array selbst mit createBrowserRouter. Framework Mode ergänzt ein Vite-Plugin, das app/routes.ts liest, den Code pro Route aufteilt, Typen generiert und auf dem Server rendern kann.
Füge eine Route mit path "*" als letztes Kind deiner Root-Route hinzu. Sie passt auf jede URL, auf die sonst nichts gepasst hat. Sorge auf einem statischen Host außerdem dafür, dass der Server für unbekannte Pfade index.html ausliefert, damit der Router die Seite überhaupt anzeigen kann.
Nein, Params sind immer Strings oder undefined, wenn das Segment optional ist und fehlt. Wandle sie mit Number() um und behandle den Fall, dass das Ergebnis keine gültige Zahl ist.
Größtenteils ja. Aktiviere zuerst in v6 alle sechs v7 Future Flags und behebe die Warnungen, dann führe das Upgrade durch. Laut offiziellem Guide gibt es danach außer der Umbenennung des Pakets keine Breaking Changes.
Die drei Arten, React Router 7 zu nutzen
In v7 deckt ein Paket Web-Apps ab. react-router-dom existiert nur noch als Re-Export für ältere Imports.
Routen sind ein einfaches Array, das Loader, Actions, Pending-UI und errorElement freischaltet. Alles wird aus react-router importiert.
Das kleinste Setup und am nächsten an v6-Code. Es hat keine Loader oder Actions; lade Daten stattdessen in den Komponenten.
Das Vite-Plugin aus @react-router/dev liest diese Datei, teilt den Code pro Route auf und generiert für jedes Routenmodul Typen in ./+types/.
Jede Routendatei exportiert ihren Loader und eine Default-Komponente. Die generierten Route-Typen geben params und loaderData echte Typen.
Die Eltern-Route rendert die gemeinsame UI einmal; <Outlet /> markiert, wo das passende Kind erscheint. Eine Route ohne path, wie die unten, ist eine Layout-Route.
Ein Segment, das mit einem Doppelpunkt beginnt, wird zu einem Param. Params sind immer Strings, Zahlen wandelst du also selbst um.
Funktioniert wie useState, speichert den Wert aber im Query-String, sodass Filter ein Neuladen überstehen und sich als Link teilen lassen.
Der Loader läuft, bevor die Route rendert. Das Absenden von <Form method="post"> ruft die Action auf, und wenn sie fertig ist, lädt der Router die Loader der Seite neu. Gib einfache Objekte zurück; json() und defer() sind in v7 veraltet.
Prüfe die Session in einem Eltern-Loader und leite um, bevor ein Kind rendert. Gib den ursprünglichen Pfad mit, damit du Nutzer nach der Anmeldung zurückschicken kannst.
Ohne Loader prüft eine Wrapper-Komponente die Authentifizierung und rendert <Navigate> statt der Seite.
Ein path von * fängt jede URL ab, auf die sonst nichts gepasst hat. errorElement (oder ErrorBoundary als Komponente) wird gerendert, wenn ein Loader, eine Action oder das Rendern einen Fehler wirft; useRouteError verrät dir, was geworfen wurde.
lazy lädt den Code einer Route beim ersten Besuch. Gib die Routen-Eigenschaften zurück, die du befüllen willst, etwa Component und loader.
Rendere <ScrollRestoration /> einmal im Root-Layout eines Data Routers. Auf neuen Seiten scrollt es nach oben, bei Zurück und Vorwärts stellt es die alte Position wieder her.
Sind in v6 alle Future Flags aktiviert, sollte der Umstieg auf v7 keine weiteren Codeänderungen erfordern. Liefere jedes Flag einzeln aus, damit sich ein Problem leicht zurückverfolgen lässt. Version 8 ist inzwischen ebenfalls erschienen; das Upgrade funktioniert genauso, mit einem neuen Satz v8_-Flags, die du noch unter 7 aktivierst.
Umstieg von v6 auf v7
Ein Router direkt auf der Seite, der react-router-dom 6.30 nutzt (die Version, die diese Website ausliefert, nicht v7). Er hat ein /shop-Layout mit einer Produktliste und /shop/:productId-Detailseiten, einen ?sort-Search-Param und eine Catch-all-404. Der Routen-Code ist in v7 derselbe.
Demo
Start
Shop
Defekter Link
URL:
Shop-Layout
Sortieren (Search Param)
Name
Preis
Kein Produkt namens "{id}".
useParams() lieferte productId =
Zurück zur Liste
Live-Demo: verschachtelte Routen und Params
Startseite. Öffne den Shop.
404: Die Catch-all-Route hat gegriffen.
Kostenlos starten · Keine Kreditkarte nötig