Introduction au Routing

Jusqu'à présent, nos applications React étaient des Single Page Apps (SPA) avec une seule "page". Il est temps de créer des applications multi-pages !

Qu'est-ce que le Routing ?

Le routing permet de mapper des URLs à des composants React.

URL                      →    Composant affiché
/                        →    <Home />
/about                   →    <About />
/products                →    <ProductList />
/products/123            →    <ProductDetail id={123} />
/contact                 →    <Contact />

Pourquoi Utiliser le Routing ?

1. Navigation Intuitive

Les utilisateurs s'attendent à avoir une URL par page.

// ❌ Sans routing : tout sur une seule page
function App() {
  const [page, setPage] = useState('home');

  return (
    <div>
      <button onClick={() => setPage('home')}>Home</button>
      <button onClick={() => setPage('about')}>About</button>

      {page === 'home' && <Home />}
      {page === 'about' && <About />}
    </div>
  );
}

// ✅ Avec routing : chaque page a une URL
// / → Home
// /about → About

Problèmes sans routing :

• Pas de bouton "Retour" du navigateur
• Impossible de bookmarker une page
• Impossible de partager un lien direct
• Pas d'historique de navigation

2. URLs Bookmarkables

// ✅ Avec routing
https://monsite.com/products/123

// L'utilisateur peut :
// - Bookmarker cette page
// - Partager le lien
// - Revenir directement à ce produit

3. Historique du Navigateur

Le routing s'intègre avec l'historique du navigateur :

User visite :
  / → Ajoute à l'historique
  /about → Ajoute à l'historique
  /contact → Ajoute à l'historique

User clique "Retour" :
  /contact → /about → / ✅ Fonctionne !

4. SEO (Référencement)

Chaque page a une URL distincte, ce qui permet aux moteurs de recherche de les indexer.

// ✅ Bon pour le SEO
https://blog.com/articles/apprendre-react
https://blog.com/articles/hooks-useeffect
https://blog.com/contact

// ❌ Mauvais pour le SEO
https://blog.com/ (tout sur une page)

React Router : Une Solution Populaire

React Router est l'une des librairies de routing les plus populaires pour React. D'autres solutions existent (TanStack Router, Wouter, etc.), mais React Router reste très largement utilisée et bien documentée.

Les Outils Principaux

React Router nous fournit plusieurs composants pour gérer le routing :

• BrowserRouter → Active le routing dans l'application
• Routes et Route → Définissent quelle URL affiche quel composant
• Link → Permet de naviguer entre les pages sans rechargement

Exemple conceptuel :

URL: /about    →  React Router  →  Affiche <About />
URL: /contact  →  React Router  →  Affiche <Contact />

Nous allons voir comment utiliser ces outils en pratique dans la page suivante.

Cas d'Usage du Routing

Récapitulatif

Prochaine Étape

Maintenant que vous comprenez pourquoi utiliser le routing, passons à la pratique : créer des routes, naviguer, et gérer les layouts !