Kopieerbare React Router 7 voorbeelden: setup in elke modus, geneste layouts, params, loaders en actions, beveiligde routes, 404-pagina's, lazy routes en overstappen van v6.
React Router 7 wordt geleverd als één package, react-router. Wikkel uw app in BrowserRouter voor eenvoudige routing, of bouw routes met createBrowserRouter en RouterProvider om loaders, actions en error boundaries te gebruiken. Nest child routes onder een layout die Outlet rendert, lees padsegmenten met useParams en querystrings met useSearchParams.
De API's die u het meest gebruikt
Elk voorbeeld hieronder is geschreven voor React Router 7 en importeert uit react-router. De kleine demo bovenaan is live, dus u kunt door geneste routes en params klikken; hij draait op de routerversie die deze site gebruikt, en die staat erbij vermeld.
Nee. In v7 wordt alles geëxporteerd vanuit react-router. react-router-dom installeert nog steeds en exporteert dezelfde API opnieuw om upgrades te vergemakkelijken, maar nieuwe projecten hebben alleen react-router nodig.
Data mode is een library: u bouwt de route-array zelf met createBrowserRouter. Framework mode voegt een Vite-plugin toe die app/routes.ts leest, code per route splitst, types genereert en op de server kan renderen.
Voeg een route met path "*" toe als laatste child van uw root route. Die matcht elke URL die verder nergens op matchte. Laat op een statische host de server ook index.html teruggeven voor onbekende paden, zodat de router de kans krijgt hem te tonen.
Nee, params zijn altijd strings, of undefined als het segment optioneel is en ontbreekt. Zet ze om met Number() en vang het geval af waarin het resultaat geen geldig getal is.
Grotendeels wel. Zet eerst in v6 alle zes v7 future flags aan en los de waarschuwingen op, en upgrade daarna. Volgens de officiële gids zijn er daarna geen breaking changes meer, afgezien van de hernoemde package.
De drie manieren om React Router 7 te gebruiken
In v7 dekt één package webapps af. react-router-dom bestaat alleen nog als re-export voor oudere imports.
Routes zijn een gewone array, wat loaders, actions, pending UI en errorElement mogelijk maakt. Alles wordt geïmporteerd uit react-router.
De kleinste setup en het dichtst bij v6-code. Er zijn geen loaders of actions; haal data in plaats daarvan op binnen componenten.
De Vite-plugin uit @react-router/dev leest dit bestand, splitst code per route en genereert types in ./+types/ voor elke routemodule.
Elk routebestand exporteert zijn loader en een default component. De gegenereerde Route-types geven params en loaderData echte types.
De parent rendert gedeelde UI één keer; <Outlet /> geeft aan waar de matchende child verschijnt. Een route zonder path, zoals die hieronder, is een layout route.
Een segment dat met een dubbele punt begint, wordt een param. Params zijn altijd strings, dus zet getallen zelf om.
Werkt als useState, maar slaat de waarde op in de querystring, zodat filters een refresh overleven en als link gedeeld kunnen worden.
De loader draait voordat de route rendert. Het verzenden van <Form method="post"> roept de action aan, en als die klaar is laadt de router de loaders op de pagina opnieuw. Geef gewone objecten terug; json() en defer() zijn deprecated in v7.
Controleer de sessie in een parent loader en redirect voordat er een child rendert. Geef het oorspronkelijke pad mee zodat u mensen na het inloggen kunt terugsturen.
Zonder loaders controleert een wrappercomponent de auth en rendert <Navigate> in plaats van de pagina.
Een path van * vangt elke URL op die verder nergens op matchte. errorElement (of ErrorBoundary als component) rendert wanneer een loader, action of render een fout gooit; useRouteError vertelt u wat er gegooid is.
lazy laadt de code van een route de eerste keer dat iemand die bezoekt. Geef de route-eigenschappen terug die u wilt invullen, zoals Component en loader.
Render <ScrollRestoration /> één keer in de root layout van een data router. Het scrolt naar boven op nieuwe pagina's en herstelt de oude positie bij terug en vooruit.
Met elke future flag aan in v6 zou de overstap naar v7 geen andere codewijzigingen moeten vragen. Zet elke flag apart live, zodat een probleem makkelijk te herleiden is. Versie 8 is inmiddels ook uit; die upgrade werkt op dezelfde manier, met een nieuwe set v8_-flags die u aanzet terwijl u nog op 7 zit.
Van v6 naar v7
Een router op de pagina die react-router-dom 6.30 draait (de versie die deze site levert, niet v7). Er is een /shop-layout met een productlijst en /shop/:productId-detailpagina's, een ?sort-search param en een catch-all 404. De routecode is in v7 hetzelfde.
Demo
Home
Winkel
Kapotte link
URL:
Winkellayout
Sorteren (search param)
Naam
Prijs
Geen product met de naam "{id}".
useParams() gaf productId =
Terug naar de lijst
Live demo: geneste routes en params
Homepagina. Open de winkel.
404: de catch-all route matchte.
Gratis beginnen · Geen creditcard nodig