Esempi di React Router 7 da copiare: setup in ogni modalità, layout annidati, params, loader e action, route protette, pagine 404, lazy route e migrazione da v6.
React Router 7 è distribuito come un unico pacchetto, react-router. Avvolgi la tua app in BrowserRouter per un routing semplice, oppure crea le route con createBrowserRouter e RouterProvider per usare loader, action ed error boundary. Annida le route figlie sotto un layout che renderizza Outlet, leggi i segmenti del percorso con useParams e le query string con useSearchParams.
Le API che usi di più
Ogni esempio qui sotto è scritto per React Router 7 e importa da react-router. La piccola demo in alto è funzionante, quindi puoi navigare tra route annidate e params; gira sulla versione del router usata da questo sito, indicata sulla demo stessa.
No. In v7 tutto viene esportato da react-router. react-router-dom si installa ancora e riesporta la stessa API per facilitare gli aggiornamenti, ma ai nuovi progetti serve solo react-router.
Il data mode è una libreria: costruisci tu l'array delle route con createBrowserRouter. Il framework mode aggiunge un plugin Vite che legge app/routes.ts, divide il codice per route, genera i tipi e può renderizzare sul server.
Aggiungi una route con path "*" come ultima figlia della route radice. Corrisponde a qualsiasi URL che nient'altro ha intercettato. Su un hosting statico, fai anche in modo che il server restituisca index.html per i percorsi sconosciuti, così il router ha la possibilità di mostrarla.
No, i params sono sempre stringhe, oppure undefined quando il segmento è opzionale e assente. Convertili con Number() e gestisci il caso in cui il risultato non sia un numero valido.
In gran parte sì. Attiva prima tutti e sei i future flag v7 in v6 e correggi gli avvisi, poi aggiorna. La guida ufficiale dice che dopo questo passaggio non ci sono breaking change a parte il cambio di nome del pacchetto.
I tre modi di usare React Router 7
In v7 un solo pacchetto copre le app web. react-router-dom esiste ancora solo come riesportazione per i vecchi import.
Le route sono un semplice array, il che sblocca loader, action, UI di attesa ed errorElement. Tutto viene importato da react-router.
Il setup più piccolo e il più vicino al codice v6. Non ha loader né action; recupera i dati dentro i componenti.
Il plugin Vite di @react-router/dev legge questo file, divide il codice per route e genera i tipi in ./+types/ per ogni modulo di route.
Ogni file di route esporta il suo loader e un componente di default. I tipi Route generati danno a params e loaderData tipi reali.
Il genitore renderizza la UI condivisa una sola volta; <Outlet /> indica dove appare la figlia corrispondente. Una route senza path, come quella qui sotto, è una layout route.
Un segmento che inizia con i due punti diventa un param. I params sono sempre stringhe, quindi converti tu i numeri.
Funziona come useState ma salva il valore nella query string, così i filtri sopravvivono a un refresh e si possono condividere come link.
Il loader viene eseguito prima che la route sia renderizzata. Inviare <Form method="post"> chiama l'action e, quando termina, il router ricarica i loader della pagina. Restituisci oggetti semplici; json() e defer() sono deprecati in v7.
Controlla la sessione in un loader genitore e reindirizza prima che qualsiasi figlia venga renderizzata. Passa il percorso originale così puoi riportare le persone lì dopo l'accesso.
Senza loader, un componente wrapper controlla l'autenticazione e renderizza <Navigate> al posto della pagina.
Un path * intercetta qualsiasi URL che nient'altro ha intercettato. errorElement (o ErrorBoundary come componente) viene renderizzato quando un loader, un'action o il render lancia un errore; useRouteError ti dice cosa è stato lanciato.
lazy carica il codice di una route la prima volta che qualcuno la visita. Restituisci le proprietà della route che vuoi riempire, come Component e loader.
Renderizza <ScrollRestoration /> una sola volta nel layout radice di un data router. Scorre in cima nelle nuove pagine e ripristina la posizione precedente con indietro e avanti.
Con ogni future flag attivato in v6, il passaggio a v7 non dovrebbe richiedere altre modifiche al codice. Rilascia ogni flag separatamente, così un problema è facile da individuare. Ora è uscita anche la versione 8; il suo aggiornamento funziona allo stesso modo, con un nuovo gruppo di flag v8_ da attivare mentre sei ancora sulla 7.
Passare da v6 a v7
Un router dentro la pagina che usa react-router-dom 6.30 (la versione distribuita da questo sito, non la v7). Ha un layout /shop con un elenco di prodotti e pagine di dettaglio /shop/:productId, un search param ?sort e un 404 catch-all. Il codice delle route è lo stesso in v7.
Demo
Home
Negozio
Link rotto
URL:
Layout del negozio
Ordina (search param)
Nome
Prezzo
Nessun prodotto chiamato "{id}".
useParams() ha restituito productId =
Torna all'elenco
Demo dal vivo: route annidate e params
Pagina iniziale. Apri il negozio.
404: la route catch-all ha trovato corrispondenza.
Inizia gratis · Nessuna carta di credito richiesta