À quoi sert la bibliothèque react-router-dom dans…

react-router-dom est utilisé pour construire des applications monopage (SPA) en React, en fournissant un routage côté client.

À quoi ça sert ?

Navigation : Permet aux utilisateurs de passer d'"pages" (composants) différentes sans recharger complètement la page.
Gestion des URL : Synchronise l'URL actuelle dans la barre d'adresse du navigateur avec le composant affiché.
Routage dynamique : Permet de définir des routes avec des paramètres (par exemple, /users/:id) pour charger des données spécifiques.
Navigation programmée : Permet de rediriger l'utilisateur via du code (par exemple, après une sauvegarde réussie).

Composants principaux :

BrowserRouter : Enveloppe pour l'application utilisant l'API History pour synchroniser l'URL.
Routes : Conteneur pour définir les routes.
Route : Définit la correspondance entre l'URL et le composant.
Link : Composant pour créer des liens évitant le rechargement de la page.
useNavigate : Hook pour la navigation programmée.
useParams : Hook pour extraire les paramètres de la route depuis l'URL.

Exemple d'utilisation :

// App.js
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './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 />} />
        {/* Exemple de route dynamique */}
        {/* <Route path="/users/:userId" element={<UserProfile />} /> */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

À quoi sert la bibliothèque react-router-dom dans React?