useParams() est un hook React fourni par react-router-dom (React Router v6+) qui récupère les paramètres dynamiques définis dans le chemin de l’URL via la syntaxe :nomParam.
Il retourne un objet JavaScript où toutes les valeurs sont systématiquement des chaînes de caractères (string), indépendamment de leur apparence dans l’URL.
Caractéristiques essentielles
| Critère | Détail |
|---|---|
| Source des données | Segments dynamiques de l’URL définis dans path (ex: :id, :slug) |
| Type de retour | Objet { [paramName]: string } → jamais de conversion automatique |
| Portée d’utilisation | Tout composant React descendant d’un |
| Dépendance | Nécessite le contexte React Router (erreur si utilisé hors d’une SPA routée) |
Exemple concret
// Route définie
<Route path="/employe/:matricule/service/:serviceId" element={<Profil />} />
// Dans Profil.jsx
import { useParams } from 'react-router-dom';
function Profil() {
const { matricule, serviceId } = useParams();
// URL : /employe/EMP-2026/service/7b3a9f
console.log(matricule); // "EMP-2026" (string)
console.log(serviceId); // "7b3a9f" (string)
console.log(typeof serviceId); // "string"
// Conversion explicite si nécessaire
const serviceNumericId = parseInt(serviceId, 16); // Pour un UUID hexadécimal
return <div>Matricule : {matricule}</div>;
}