Хук useSearchParams надає доступ до параметрів запиту (search parameters) поточної URL-адреси. Параметри запиту — це пари ключ-значення, які йдуть після знака питання (?) в URL. Наприклад, у URL http://example.com/products?category=electronics&page=2 параметрами запиту є category=electronics та page=2.

Що повертає useSearchParams?

Хук useSearchParams повертає масив із двох елементів: об'єкт, що представляє поточні параметри запиту, та функцію для їх оновлення. Ось як можна використати цей хук:

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
}

Об'єкт searchParams

Об'єкт searchParams є екземпляром класу URLSearchParams. Він надає зручні методи для роботи з параметрами запиту, такі як:

• get(key): Отримання значення, пов'язаного з певним ключем;
• getAll(key): Отримання всіх значень, пов'язаних з певним ключем;
• set(key, value): Встановлення або оновлення значення певного ключа;
• append(key, value): Додавання нового значення до існуючого ключа;
• delete(key): Видалення певного ключа та його значення;
• toString(): Повернення параметрів запиту у вигляді рядка (наприклад, "?category=electronics&page=2").

Функція setSearchParams

Функція setSearchParams дозволяє оновлювати параметри запиту в URL. Можна передати об'єкт із парами ключ-значення для встановлення нових параметрів або зміни існуючих. Приклад використання:

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