Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить useSearchParams()?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

> `useSearchParams()` дозволяє:
>
> 1. читати параметри з URL (`?page=2&sort=asc`)
> 2. змінювати їх (наприклад, `setSearchParams({ page: 3 })`)
> 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 |
| Навігація без перезавантаження | Змінюємо параметри, але лишаємося на тій самій сторінці |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати444 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.