📘 Introduction au Routage en React

Le routage permet de changer de vue sans recharger toute la page. En React on s’appuie majoritairement sur la bibliothèque 📦 React Router (v6) pour :

Déclarer des chemins (/, /users/:id, /dashboard)
Afficher le composant correspondant quand l’URL change
Gérer la navigation programmée (retour, redirection) et les paramètres
Structurer des routes imbriquées pour refléter l’architecture UI

🧠 Fondamentaux

Une route = un chemin + un composant à rendre. Le routeur observe l’URL et sélectionne la meilleure correspondance.

📦 Installation


pnpm add react-router

🧩 Routeur de haut niveau

Le plus courant : BrowserRouter (historique HTML5). Alternative : HashRouter si déploiement statique sans configuration serveur.


import { BrowserRouter, Routes, Route } from 'react-router';
 
function Home() { return <h1>Accueil</h1>; }
function About() { return <h1>À propos</h1>; }
 
export default function App() {
	return (
		<BrowserRouter>
			<Routes>
				<Route path="/" element={<Home />} />
				<Route path="/about" element={<About />} />
			</Routes>
		</BrowserRouter>
	);
}

🕸️ Paramètres dynamiques

Utiliser :id dans le chemin et useParams() pour récupérer la valeur.


import { useParams } from 'react-router';
 
function User() {
	const { id } = useParams();
	return <p>Utilisateur #{id}</p>;
}

Deux approches :

Déclarative via <Link to="/about" />
Programmée via useNavigate() (redirection après action, retour).


import { useNavigate } from 'react-router';
function ProfileButton() {
	const navigate = useNavigate();
	return <button onClick={() => navigate('/profile')} aria-label="Aller au profil">Profil</button>;
}

🪜 Routes imbriquées

Permettent de partager un layout et de gérer des sous-sections.


 
import { BrowserRouter, Routes, Route, Outlet, Link } from 'react-router';
 
function DashboardLayout() {
	return (
		<div>
			<h2>Dashboard</h2>
			<nav>
				<Link to="stats">Stats</Link> | <Link to="settings">Paramètres</Link>
			</nav>
			<Outlet /> {/* Rendu des sous-routes */}
		</div>
	);
}
function Stats() { return <p>📈 Statistiques</p>; }
function Settings() { return <p>⚙️ Paramètres</p>; }
 
export default function AppNested() {
	return (
		<BrowserRouter>
			<Routes>
				<Route path="/dashboard" element={<DashboardLayout />}>  
					<Route path="stats" element={<Stats />} />
					<Route path="settings" element={<Settings />} />
				</Route>
			</Routes>
		</BrowserRouter>
	);
}

💤 Chargement différé (lazy loading)

Réduit le bundle initial : charger un écran uniquement quand nécessaire.


import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router';
 
const Admin = lazy(() => import('./Admin'));
 
export function AppLazy() {
	return (
		<BrowserRouter>
			<Suspense fallback={<p>Chargement…</p>}>
				<Routes>
					<Route path="/admin" element={<Admin />} />
				</Routes>
			</Suspense>
		</BrowserRouter>
	);
}

🧪 Exemple complet (récap)


import { BrowserRouter, Routes, Route, Link, useParams, useNavigate } from 'react-router';
 
function Home() {
	return (
		<div>
			<h2>Accueil</h2>
			<Link to="/about">À propos</Link> | <Link to="/user/42">Utilisateur 42</Link>
		</div>
	);
}
function About() {
	const navigate = useNavigate();
	return (
		<div>
			<h2>À propos</h2>
			<button onClick={() => navigate(-1)} aria-label="Retour">Retour</button>
		</div>
	);
}
function User() {
	const { id } = useParams();
	return <div>Utilisateur {id}</div>;
}
 
export default function AppRouter() {
	return (
		<BrowserRouter>
			<Routes>
				<Route path="/" element={<Home />} />
				<Route path="/about" element={<About />} />
				<Route path="/user/:id" element={<User />} />
			</Routes>
		</BrowserRouter>
	);
}

📚 Ressources

Documentation officielle : https://reactrouter.com/en/main
Concepts SPA : https://developer.mozilla.org/en-US/docs/Glossary/SPA
Accessibilité des liens : https://www.w3.org/WAI/tutorials/

⚡ TLDR

Déclarer routes via <Routes> / <Route>
Paramètres dynamiques avec :id + useParams()
Navigation : <Link> (déclaratif) / useNavigate() (impératif)
Imbrication : <Outlet> dans un layout parent
Optimisation : lazy + Suspense pour réduire bundle

Voir aussi : /react/composants pour structuration UI et /react/donnees pour la gestion d’état croisée.