Skip to main content

Як отримати query-параметри з URL?

ReactJunior~1 хв читання
Запропонувати правку

Що таке 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");

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

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

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

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