:paramName est la syntaxe utilisée dans React Router pour définir un paramètre de chemin dynamique (dynamic path segment).
Le préfixe : indique que le segment suivant dans l’URL est une valeur variable capturée et accessible via le hook useParams().
paramName est un identifiant arbitraire (ex: id, slug, employeeId) choisi par le développeur pour nommer ce paramètre.
Fonctionnement technique
| Élément | Rôle |
|---|---|
| : | Caractère réservé signalant un paramètre dynamique |
| paramName | Nom symbolique (ex: id, category) utilisé pour récupérer la valeur |
| Correspondance | Matche exactement un segment de l’URL (entre deux /) |
| Récupération | Via useParams() → retourne un objet { paramName: « valeur » } |
Exemple
// Définition de la route
<Route path="/employees/:employeeId" element={<EmployeeDetail />} />
// Dans EmployeeDetail.jsx
import { useParams } from 'react-router-dom';
function EmployeeDetail() {
const { employeeId } = useParams(); // Ex: "42" si URL = /employees/42
return <h1>Employé ID : {employeeId}</h1>;
}La syntaxe :paramName est le mécanisme standard de React Router v6 pour :
Extraire des valeurs variables depuis l’URL
Structurer des routes sémantiques (/user/:username, /product/:slug)
Séparer clairement identifiants (path params) et options (query params)