Le hook useSearchParams permet d'accéder aux paramètres de requête (paramètres de recherche) de l'URL actuelle. Les paramètres de requête sont des paires clé-valeur qui suivent le point d'interrogation (?) dans une URL. Par exemple, dans l'URL http://example.com/products?category=electronics&page=2, les paramètres de requête sont category=electronics et page=2.

Que retourne useSearchParams ?

Le hook useSearchParams retourne un tableau contenant deux éléments : un objet représentant les paramètres de requête actuels et une fonction permettant de mettre à jour ces paramètres. Exemple d'utilisation du hook :

import { useSearchParams } from "react-router-dom";

function MyComponent() {
  const [searchParams, setSearchParams] = useSearchParams();

  // `searchParams` is an object representing the current query parameters
  // `setSearchParams` is a function to update the query parameters
}

L'objet searchParams

L'objet searchParams est une instance de la classe URLSearchParams. Il fournit des méthodes pratiques pour interagir avec les paramètres de requête, telles que :

• get(key) : Récupère la valeur associée à une clé spécifique ;
• getAll(key) : Récupère toutes les valeurs associées à une clé spécifique ;
• set(key, value) : Définit ou met à jour la valeur d'une clé spécifique ;
• append(key, value) : Ajoute une nouvelle valeur à une clé existante ;
• delete(key) : Supprime une clé spécifique et sa valeur associée ;
• toString() : Retourne les paramètres de requête sous forme de chaîne (par exemple, "?category=electronics&page=2").

La fonction setSearchParams

La fonction setSearchParams permet de mettre à jour les paramètres de requête dans l'URL. Il est possible de lui transmettre un objet avec des paires clé-valeur pour définir de nouveaux paramètres ou modifier ceux existants. Exemple d'utilisation :

// Suppose the current URL is `http://example.com/products?category=electronics&page=2`

setSearchParams({ category: "clothing", color: "blue" });

// The URL is now `http://example.com/products?category=clothing&color=blue`