El useSearchParams es un hook que proporciona acceso a los parámetros de consulta (parámetros de búsqueda) de la URL actual. Los parámetros de consulta son pares clave-valor que siguen al signo de interrogación (?) en una URL. Por ejemplo, en la URL http://example.com/products?category=electronics&page=2, los parámetros de consulta son category=electronics y page=2.

¿Qué devuelve useSearchParams?

El hook useSearchParams devuelve un arreglo con dos elementos: un objeto que representa los parámetros de consulta actuales y una función para actualizar dichos parámetros. Así es como se puede utilizar el 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
}

El objeto searchParams

El objeto searchParams es una instancia de la clase URLSearchParams. Proporciona métodos convenientes para interactuar con los parámetros de consulta, tales como:

• get(key): Recupera el valor asociado a una clave específica;
• getAll(key): Recupera todos los valores asociados a una clave específica;
• set(key, value): Establece o actualiza el valor de una clave específica;
• append(key, value): Añade un nuevo valor a una clave existente;
• delete(key): Elimina una clave específica y su valor asociado;
• toString(): Devuelve los parámetros de consulta como una cadena (por ejemplo, "?category=electronics&page=2").

La función setSearchParams

La función setSearchParams permite actualizar los parámetros de consulta en la URL. Se le puede pasar un objeto con pares clave-valor para establecer nuevos parámetros o modificar los existentes. A continuación, un ejemplo de uso:

// 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`