Le Routage en React

Le routage est essentiel pour créer des applications React multi-pages. React Router est la bibliothèque standard pour gérer la navigation dans React.

Installation de React Router

npm install react-router-dom

Configuration de Base

Mise en place du routeur

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Navigation entre les pages

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/">Accueil</Link>
      <Link to="/about">À propos</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

Routes Dynamiques

Routes avec paramètres

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:id" element={<UserProfile />} />
        <Route path="/products/:category/:id" element={<ProductDetails />} />
      </Routes>
    </BrowserRouter>
  );
}

// Dans le composant UserProfile
function UserProfile() {
  const { id } = useParams();
  
  return <div>Profil de l'utilisateur {id}</div>;
}