Au-delà des chemins fixes : L'utilité des routes dynamiques

Jusqu'à présent, nous avons défini des routes avec des chemins statiques comme `/`, `/a-propos` ou `/dashboard`. Cependant, de nombreuses applications web nécessitent d'afficher des pages dont le contenu dépend d'un identifiant ou d'une information variable présente dans l'URL. Pensez par exemple à une page de profil utilisateur (`/utilisateurs/jean-dupont`), une page de détail de produit (`/produits/12345`), ou un article de blog (`/blog/mon-super-article`). Il serait impraticable et impossible de définir une `` statique distincte pour chaque utilisateur, produit ou article potentiel.

C'est ici qu'interviennent les routes dynamiques. Elles permettent de définir un modèle de chemin (un pattern) qui peut correspondre à plusieurs URLs différentes, en capturant les parties variables de l'URL comme des paramètres. React Router nous permet de définir ces modèles et fournit ensuite un moyen simple d'accéder aux valeurs réelles de ces paramètres dans nos composants.

Définir une route dynamique et introduire `useParams`

Pour définir une route dynamique, on utilise une syntaxe spéciale dans la prop `path` du composant ``. On préfixe le segment dynamique de l'URL par un deux-points (`:`). Ce qui suit les deux-points devient le nom du paramètre que nous pourrons récupérer.

Par exemple, pour créer une route qui affiche le profil d'un utilisateur basé sur son identifiant unique (qui pourrait être un nombre ou une chaîne) :

// Dans votre composant App.js ou là où vous définissez les Routes
import UserProfile from './pages/UserProfile';

// ...

  } />
  } />
  {/* Définition de la route dynamique */}
  } />
  {/* ':userId' est le paramètre dynamique */}
  {/* Cette route correspondra à /utilisateurs/1, /utilisateurs/alice, /utilisateurs/abc-123 etc. */}

// ...

Maintenant, comment le composant `UserProfile` peut-il savoir quel `userId` a été utilisé dans l'URL (par exemple, '1', 'alice', ou 'abc-123') ?

React Router DOM fournit un hook très pratique pour cela : `useParams`. Lorsqu'il est appelé à l'intérieur d'un composant rendu par une `` dynamique, ce hook retourne un objet. Les clés de cet objet sont les noms des paramètres définis dans le `path` de la route (dans notre exemple, `userId`), et les valeurs sont les segments correspondants extraits de l'URL actuelle.

Utilisation pratique du hook `useParams`

Voyons comment utiliser `useParams` dans notre composant `UserProfile` pour récupérer et afficher l'identifiant de l'utilisateur :

// pages/UserProfile.js
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
  // Appeler le hook useParams pour obtenir les paramètres de l'URL
  const params = useParams();
  const userId = params.userId; // Accès direct à la valeur du paramètre 'userId'
  
  // Ou en utilisant la déstructuration :
  // const { userId } = useParams();

  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Exemple : Utiliser l'userId pour charger les données de l'utilisateur
  useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`) // Appel API typique utilisant l'ID
      .then(response => {
        if (!response.ok) {
          throw new Error('Utilisateur non trouvé');
        }
        return response.json();
      })
      .then(data => {
        setUserData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, [userId]); // L'effet dépend de userId, se ré-exécute si l'ID change

  if (loading) {
    return 
Chargement du profil de l'utilisateur {userId}...
;
  }

  if (error) {
    return 
Erreur : {error}
  }

  return (
    

      
Profil de l'Utilisateur
      
ID demandé : {userId}
      {userData && (
        

          
Nom : {userData.name}
          
Email : {userData.email}
          {/* Afficher d'autres informations de l'utilisateur */}
        
      )}
    
  );
}

export default UserProfile;

Dans cet exemple, `useParams` récupère l'objet des paramètres. Nous extrayons `userId`. Cette valeur est ensuite utilisée pour afficher l'ID demandé et, de manière plus réaliste, pour construire l'URL d'un appel API afin de récupérer les données spécifiques à cet utilisateur. L'effet `useEffect` est déclenché lorsque le composant est monté et à chaque fois que la valeur de `userId` change (si l'utilisateur navigue d'un profil à un autre sans quitter le composant `UserProfile`).

Liens vers des routes dynamiques et points importants

Pour créer des liens qui pointent vers ces routes dynamiques, vous utiliserez le composant `` ou `` comme d'habitude, mais vous devrez construire la chaîne de caractères de la prop `to` en y intégrant la valeur dynamique requise.

// Exemple dans une liste d'utilisateurs
import { Link } from 'react-router-dom';

function UserList({ users }) {
  return (
    

      {users.map(user => (
        

          {/* Construction dynamique du lien vers le profil */} 
          
            {user.name}
          
        
      ))}
    
  );
}