Logo

Routes avec paramètres dans React Router : Gestion des URL dynamiques

Introduction

Dans les applications React, la navigation dynamique permet de créer des interfaces plus interactives. React Router offre un moyen simple de gérer des routes avec des paramètres variables, rendant possible la création de pages de détail, de profils utilisateurs et d'autres interfaces qui dépendent de données spécifiques.

Cet article détaille comment utiliser et gérer les routes avec paramètres dans React Router.

1. Comprendre les routes paramétrées

Une route paramétrée permet de définir un modèle d'URL où certaines parties peuvent varier dynamiquement. Par exemple, une route '/utilisateur/:id' peut correspondre à '/utilisateur/123' ou '/utilisateur/456'.

Le deux-points (:) devant un segment indique à React Router qu'il s'agit d'un paramètre variable qui peut prendre différentes valeurs.

Exemple de configuration de route

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Route avec paramètre :id */}
        <Route path="/utilisateur/:id" element={<ProfilUtilisateur />} />
      </Routes>
    </BrowserRouter>
  );
}

2. Générer des liens avec paramètres

Pour créer des liens dynamiques, on utilise généralement le composant Link de React Router avec une interpolation de chaîne.

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

function ListeUtilisateurs({ utilisateurs }) {
  return (
    <div>
      {utilisateurs.map((utilisateur) => (
        <Link to={`/utilisateur/${utilisateur.id}`}>
          {utilisateur.nom}
        </Link>
      ))}
    </div>
  );
}

Dans cet exemple, chaque lien généré pointe vers une route spécifique avec l'ID de l'utilisateur comme paramètre.

3. Récupérer les paramètres avec useParams()

Le hook useParams() de React Router permet d'extraire facilement les paramètres de l'URL dans un composant.

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

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

4. Bonnes pratiques

  • Utilisez des noms de paramètres clairs et descriptifs
  • Validez toujours les paramètres côté composant
  • Gérez les cas où le paramètre peut être manquant ou invalide

Exemple complet : Page de détail avec gestion d'erreur

function DetailProduit() {
  const { id } = useParams();
  const [produit, setProduit] = useState(null);
  const [erreur, setErreur] = useState(null);

  useEffect(() => {
    async function chargerProduit() {
      try {
        const response = await fetch(`/api/produits/${id}`);
        if (!response.ok) throw new Error('Produit non trouvé');
        const data = await response.json();
        setProduit(data);
      } catch (err) {
        setErreur(err.message);
      }
    }
    chargerProduit();
  }, [id]);

  if (erreur) return <div>Erreur : {erreur}</div>;
  if (!produit) return <div>Chargement...</div>;

  return <div>Détails du produit : {produit.nom}</div>;
}

Conclusion

Les routes paramétrées simplifient la création d'interfaces React qui reposent sur des données dynamiques. En comprenant comment configurer les routes et utiliser useParams(), vous pouvez créer des applications web plus flexibles et réactives.

Logo