📘 Chapitre – Navigation entre vues avec `react-router-dom`

1. 🎯 Objectif pédagogique

Apprendre à configurer et utiliser react-router-dom pour gérer la navigation entre plusieurs pages ou vues dans une application React.

2. 📚 Concepts abordés

Installation de react-router-dom
Composants principaux : BrowserRouter, Routes, Route, Link
Création de plusieurs pages (Home, About, etc.)
Utilisation de Link et NavLink pour la navigation
Redirection avec Navigate

3. 🧠 Explication théorique

react-router-dom est une librairie permettant d’implémenter la navigation côté client (Single Page Application). La structure de base :

import { BrowserRouter, Routes, Route } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

Pour naviguer sans recharger la page, on utilise :

<Link to="/about">Aller sur About</Link>

4. 🛠 Tutoriel pratique

Résumé du travail : Configurer la navigation entre une page d’accueil et une page “À propos”.

Arborescence projet :

react-demo/
 ├── src/
 │   ├── App.jsx
 │   ├── pages/
 │   │    ├── Home.jsx
 │   │    └── About.jsx

Étape 1 : Installer react-router-dom

npm install react-router-dom

Étape 2 : Créer deux pages

Home.jsx :

function Home() {
  return <h2>Page d'accueil</h2>;
}
export default Home;

About.jsx :

function About() {
  return <h2>À propos de notre application</h2>;
}
export default About;

Étape 3 : Configurer App.jsx

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Accueil</Link> | <Link to="/about">À propos</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Lancer le serveur avec :

npm run dev

Cliquer sur “À propos” changera de page sans rechargement.

Étape 5 : Redirection avec Navigate (optionnel)

import { Navigate } from 'react-router-dom';
<Route path="/old-page" element={<Navigate to="/" />} />

5. 🧾 Résumé et points-clés

react-router-dom gère les routes d’une SPA (Single Page Application).
BrowserRouter encapsule l’ensemble des routes.
Link permet une navigation sans rechargement de la page.
Routes et Route définissent les chemins et composants associés.
Navigate est utilisé pour les redirections automatiques.

📘 Chapitre – Navigation entre vues avec react-router-dom