useParams

useParams est un hook fourni par la bibliothèque React Router, qui est utilisée pour la gestion des routes dans les applications React. Ce hook permet d’obtenir les paramètres de l’URL actuelle.

Lorsque vous définissez des routes avec React Router, vous pouvez inclure des segments de paramètres dans l’URL, qui sont des parties variables de l’URL. Par exemple, dans une application de blog, vous pourriez avoir une route pour afficher un article individuel avec une URL comme /articles/:id, où :id est un paramètre variable représentant l’identifiant de l’article.

Pour utiliser useParams, vous devez d’abord importer le hook depuis la bibliothèque React Router :

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

Ensuite, dans votre composant, vous pouvez appeler useParams pour obtenir les paramètres de l’URL. Voici un exemple :

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

function Article() {
const { id } = useParams();

// Utilisez l'ID pour charger les données de l'article correspondant, par exemple
// const article = fetchArticle(id);

return (
<div>
<h2>Article {id}</h2>
{/* Affichez les détails de l'article */}
</div>
);
}

Dans cet exemple, useParams renvoie un objet contenant les valeurs des paramètres de l’URL. Vous pouvez ensuite extraire les valeurs spécifiques dont vous avez besoin. Dans cet exemple, nous extrayons la valeur de id de l’objet retourné par useParams en utilisant la syntaxe de déstructuration.

Dans le composant Article, nous utilisons l’ID pour effectuer une action spécifique, comme récupérer les données de l’article correspondant à cet identifiant.

En résumé, useParams est un hook de React Router qui permet d’obtenir les paramètres de l’URL dans les applications React. Il est utile lorsque vous avez des segments de paramètres variables dans vos routes et que vous devez accéder à ces valeurs dans vos composants.