Що робить useSearchParams()?

ReactJunior~1 хв читання

Що робить `useSearchParams()`

useSearchParams() дозволяє:

читати параметри з URL (?page=2&sort=asc)

змінювати їх (наприклад, setSearchParams({ page: 3 }))

оновлювати рядок запиту без перезавантаження сторінки

Приклад базового використання

javascript

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

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

  const page = searchParams.get("page") || 1;
  const sort = searchParams.get("sort") || "asc";

  return (
    <div>
      <p>Поточна сторінка: {page}</p>
      <p>Сортування: {sort}</p>

      <button onClick={() => setSearchParams({ page: 2, sort: "desc" })}>
        Змінити параметри
      </button>
    </div>
  );
}

Якщо URL =

javascript

https://example.com/products?page=1&sort=asc

searchParams.get("page") → "1" searchParams.get("sort") → "asc"

При кліку на кнопку URL зміниться на:

javascript

https://example.com/products?page=2&sort=desc

Без перезавантаження сторінки.

Що повертає `useSearchParams()`

Хук повертає масив із двох елементів:

javascript

const [searchParams, setSearchParams] = useSearchParams();

Елемент	Тип	Призначення
`searchParams`	`URLSearchParams`	Дозволяє читати параметри (`get`, `has`, `entries` тощо)
`setSearchParams`	`(params) => void`	Дозволяє оновлювати рядок запиту

Методи об'єкта `searchParams`

Метод	Опис	Приклад
`.get(name)`	Повертає значення параметра	`searchParams.get("page")`
`.getAll(name)`	Повертає масив усіх значень параметра	`searchParams.getAll("tag")`
`.has(name)`	Перевіряє, чи є параметр	`searchParams.has("sort")`
`.entries()`	Ітератор по всіх парах ключ-значення	`for (const [k,v] of searchParams.entries())`
`.toString()`	Повертає рядок запиту	`page=2&sort=asc`

Приклад читання параметрів

javascript

function Blog() {
  const [searchParams] = useSearchParams();

  const category = searchParams.get("category");
  const tag = searchParams.get("tag");

  return (
    <h2>
      Категорія: {category}, Тег: {tag}
    </h2>
  );
}

URL:

javascript

/blog?category=react&tag=hooks

Виведе:

javascript

Категорія: react, Тег: hooks

Приклад зміни параметрів

javascript

const [searchParams, setSearchParams] = useSearchParams();

function handleNextPage() {
  const nextPage = Number(searchParams.get("page") || 1) + 1;
  setSearchParams({ page: nextPage });
}

При виклику handleNextPage() URL змінюється:

javascript

?page=1  →  ?page=2

Сторінка не перезавантажується, React Router просто оновлює адресний рядок.

Приклад комбінування зі станом

javascript

const [searchParams, setSearchParams] = useSearchParams();
const [filter, setFilter] = useState(searchParams.get("filter") || "");

useEffect(() => {
  setSearchParams({ filter });
}, [filter]);

Тепер зміна стану filter буде синхронізована з URL.

Навіщо це потрібно

Задача	Чому `useSearchParams()` ідеально підходить
Фільтри і сортування	Можна зберігати вибрані фільтри в URL
Пагінація	Поточна сторінка зберігається як `?page=2`
Шеринг посилань	Можна скопіювати посилання з параметрами і поділитися
Синхронізація зі станом	React state ↔ URL
Навігація без перезавантаження	Змінюємо параметри, але лишаємося на тій самій сторінці

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.