Exemples React Router 7 à copier : installation dans chaque mode, layouts imbriqués, params, loaders et actions, routes protégées, pages 404, routes lazy et migration depuis la v6.
React Router 7 est livré en un seul paquet, react-router. Enveloppez votre application dans BrowserRouter pour un routage simple, ou construisez vos routes avec createBrowserRouter et RouterProvider pour utiliser loaders, actions et error boundaries. Imbriquez les routes enfants sous un layout qui affiche Outlet, lisez les segments de chemin avec useParams et les query strings avec useSearchParams.
Les API que vous utiliserez le plus
Chaque exemple ci-dessous est écrit pour React Router 7 et importe depuis react-router. La petite démo en haut est interactive, vous pouvez donc naviguer entre routes imbriquées et params ; elle tourne sur la version du routeur utilisée par ce site, indiquée dessus.
Non. En v7, tout est exporté depuis react-router. react-router-dom s'installe toujours et réexporte la même API pour faciliter les mises à niveau, mais les nouveaux projets n'ont besoin que de react-router.
Le mode data est une bibliothèque : vous construisez vous-même le tableau de routes avec createBrowserRouter. Le mode framework ajoute un plugin Vite qui lit app/routes.ts, découpe le code par route, génère les types et peut faire le rendu côté serveur.
Ajoutez une route avec le path "*" comme dernier enfant de votre route racine. Elle correspond à toute URL qu'aucune autre route n'a captée. Sur un hébergeur statique, faites aussi renvoyer index.html par le serveur pour les chemins inconnus, afin que le routeur puisse l'afficher.
Non, les params sont toujours des chaînes, ou undefined quand le segment est optionnel et absent. Convertissez avec Number() et gérez le cas où le résultat n'est pas un nombre valide.
En grande partie, oui. Activez d'abord les six future flags v7 en v6 et corrigez les avertissements, puis faites la mise à niveau. Le guide officiel indique qu'il n'y a ensuite aucun changement cassant, hormis le renommage du paquet.
Les trois façons d'utiliser React Router 7
En v7, un seul paquet couvre les applications web. react-router-dom n'existe plus que comme réexport pour les anciens imports.
Les routes sont un simple tableau, ce qui débloque loaders, actions, interface d'attente et errorElement. Tout est importé depuis react-router.
La configuration la plus légère et la plus proche du code v6. Pas de loaders ni d'actions : chargez plutôt les données dans les composants.
Le plugin Vite de @react-router/dev lit ce fichier, découpe le code par route et génère les types dans ./+types/ pour chaque module de route.
Chaque fichier de route exporte son loader et un composant par défaut. Les types Route générés donnent de vrais types à params et loaderData.
Le parent affiche une seule fois l'interface partagée ; <Outlet /> indique où apparaît l'enfant correspondant. Une route sans path, comme celle ci-dessous, est une route de layout.
Un segment qui commence par deux-points devient un param. Les params sont toujours des chaînes, convertissez donc les nombres vous-même.
Fonctionne comme useState mais stocke la valeur dans la query string, si bien que les filtres survivent à une actualisation et peuvent être partagés par lien.
Le loader s'exécute avant le rendu de la route. Envoyer un <Form method="post"> appelle l'action, puis le routeur recharge les loaders de la page une fois qu'elle a terminé. Renvoyez des objets simples ; json() et defer() sont dépréciés en v7.
Vérifiez la session dans un loader parent et redirigez avant le rendu de tout enfant. Transmettez le chemin d'origine pour pouvoir renvoyer les utilisateurs après la connexion.
Sans loaders, un composant enveloppe vérifie l'authentification et affiche <Navigate> à la place de la page.
Un path * capte toute URL qu'aucune autre route n'a captée. errorElement (ou ErrorBoundary en tant que composant) s'affiche quand un loader, une action ou un rendu lève une erreur ; useRouteError vous indique ce qui a été levé.
lazy charge le code d'une route la première fois que quelqu'un la visite. Renvoyez les propriétés de route à renseigner, comme Component et loader.
Affichez <ScrollRestoration /> une seule fois dans le layout racine d'un data router. Il remonte en haut sur les nouvelles pages et restaure l'ancienne position avec précédent et suivant.
Avec tous les future flags activés en v6, le passage à la v7 ne devrait demander aucune autre modification du code. Déployez chaque flag séparément pour qu'un problème soit facile à retrouver. La version 8 est désormais disponible elle aussi ; sa mise à niveau fonctionne de la même façon, avec une nouvelle série de flags v8_ à activer tant que vous êtes encore en 7.
Passer de la v6 à la v7
Un routeur intégré à la page qui tourne sur react-router-dom 6.30 (la version livrée par ce site, pas la v7). Il comporte un layout /shop avec une liste de produits et des pages de détail /shop/:productId, un search param ?sort et une route 404 fourre-tout. Le code des routes est identique en v7.
Démo
Accueil
Boutique
Lien cassé
URL :
Layout de la boutique
Tri (search param)
Nom
Prix
Aucun produit nommé "{id}".
useParams() a renvoyé productId =
Retour à la liste
Démo en direct : routes imbriquées et params
Page d'accueil. Ouvrez la boutique.
404 : la route fourre-tout a correspondu.
Commencer gratuitement · Sans carte bancaire