Le routage (ou routing) est le mécanisme global, orchestré par un routeur, qui permet de gérer la navigation dans l’application et de faire le lien entre l’URL et les composants associés. Il assure que la bonne route est affichée en fonction de l’adresse, et ce, sans rechargement de la page.
Fonctionnement :
Le routage est une fonctionnalité clé des applications monopages (SPA). Il fonctionne en deux temps :
Configuration :
Le développeur définit un ensemble de routes (le tableau ou l’arbre des routes) dans la configuration du routeur.
Interception :
Le routeur écoute les changements d’URL. Lorsque l’URL change, il la compare à sa table de routes et, si une correspondance est trouvée, il rend le composant associé sans demander une nouvelle page au serveur.
En pratique, le routage s’articule autour de plusieurs concepts clés :
Conteneur (Router) et Fournisseur (BrowserRouter) :
L’application doit être encapsulée dans un fournisseur (comme BrowserRouter) pour activer la gestion de l’historique du navigateur .
Conteneur des Routes (Routes) :
Ce composant agit comme un conteneur qui analyse l’URL courante et ne sélectionne que la première qui correspond .
Navigation :
Les composants et le hook useNavigate permettent de changer l’URL et de naviguer de manière programmatique sans recharger la page.
Les deux grandes approches du routage dans React
Il est important de savoir que deux bibliothèques principales se partagent l’écosystème React, avec des philosophies différentes :
React Router (react-router-dom) :
C’est la solution historique et la plus utilisée. Elle propose un routage déclaratif basé sur des composants et peut être utilisée de trois manières : un mode Framework avec chargement de données intégré, un mode Data centré sur les chargeurs (loaders), et le mode Déclaratif classique .
TanStack Router (@tanstack/react-router) :
Une alternative plus récente et très appréciée pour son routage entièrement typé en TypeScript. Il propose souvent un routage basé sur les fichiers (comme Next.js) et une gestion avancée des paramètres d’URL et de la recherche.
| Concept | Définition concise | Rôle |
|---|---|---|
| Route | Association entre un chemin URL et un composant React. | Définit quoi afficher. |
| Routage | Mécanisme global de navigation, orchestré par le routeur. | Déclenche l’affichage de la route correcte sans recharger la page. |