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

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

Допрацюйте відповідь до «Як отримати query-параметри з URL?». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

## Що таке query-параметри

Приклад URL:

```javascript
https://example.com/products?page=2&sort=price_asc&category=shirts
```

Query-параметри - це частина після `?`:

```javascript
page=2&sort=price_asc&category=shirts
```

---

## Спосіб 1. Через хук `useSearchParams()` (React Router v6+)

Це **найзручніший і найбільш "реактовий" спосіб**, якщо ти використовуєш `react-router-dom`.

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

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

const page = searchParams.get("page");
  const sort = searchParams.get("sort");
  const category = searchParams.get("category");

return (
    <div>
      <p>Сторінка: {page}</p>
      <p>Сортування: {sort}</p>
      <p>Категорія: {category}</p>
    </div>
  );
}
```

Якщо користувач відкриє:
`/products?page=2&sort=price_asc&category=shirts`

Ти отримаєш:

```javascript
page = "2"
sort = "price_asc"
category = "shirts"
```

---

## Спосіб 2. Через `useLocation()` + `URLSearchParams`

Якщо тобі потрібно більше контролю над URL (наприклад, комбінувати з hash або pathname):

```javascript
import { useLocation } from "react-router-dom";

function ProductList() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);

const page = params.get("page");
  const sort = params.get("sort");

return (
    <p>Page: {page}, Sort: {sort}</p>
  );
}
```

`location.search` поверне рядок на кшталт `"?page=2&sort=asc"`,
а `URLSearchParams` перетворює його на зручний API для читання.

---

## Спосіб 3. Без React Router (чистий JavaScript)

Якщо ти не використовуєш `react-router-dom`, можна дістати параметри напряму з `window.location`.

```javascript
const params = new URLSearchParams(window.location.search);
const page = params.get("page");
const sort = params.get("sort");

console.log(page, sort);
```

Працює в будь-якому сучасному браузері.

---

## Додаткові можливості `URLSearchParams`

```javascript
const params = new URLSearchParams("?page=2&sort=asc&filter=red");

params.get("page");        // "2"
params.has("filter");      // true
params.getAll("tag");      // всі значення з однаковим ключем
params.toString();         // "page=2&sort=asc&filter=red"

for (const [key, value] of params.entries()) {
  console.log(key, value);
}
```

---

## Що обрати

| Підхід | Коли використовувати |
|---|---|
| `useSearchParams()` | Для більшості випадків у React Router v6+ (зручний API і автоматична синхронізація) |
| `useLocation()` + `URLSearchParams` | Коли потрібно більше контролю (наприклад, комбінувати з pathname або state) |
| `window.location` | Поза React Router, наприклад у звичайному JS-коді або зовнішньому скрипті |

---

## Підсумок:

> Щоб отримати query-параметри в React:
>
> - **через React Router:**
>
>   ```javascript
>   const [params] = useSearchParams();
>   const page = params.get("page");
>   ```
> - **через нативний JS:**
>
>   ```javascript
>   const params = new URLSearchParams(window.location.search);
>   const page = params.get("page");
>   ```

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

Для рев’юера

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

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