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

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

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

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

Контент

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

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

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

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

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

## Що робить useParams()

> useParams() повертає об'єкт із **параметрами поточного маршруту**, тобто зі значеннями, підставленими в **динамічні частини URL**.

---

## Приклад: базова ідея

Якщо в тебе є маршрут:

```javascript
<Route path="/users/:id" element={<UserPage />} />
```

І користувач відкриє сторінку:

```javascript
/users/42
```

То всередині UserPage можна отримати id ось так:

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

function UserPage() {
  const params = useParams();
  console.log(params); // { id: "42" }

return <h1>User profile #{params.id}</h1>;
}
```

useParams() поверне об'єкт, де ключі відповідають іменам параметрів, а значення - тому, що було підставлено в URL.

---

## Загальна схема

| Шлях маршруту | URL у браузері | Результат useParams() |
|---|---|---|
| /users/:id | /users/123 | { id: "123" } |
| /posts/:postId/comments/:commentId | /posts/7/comments/55 | { postId: "7", commentId: "55" } |
| /product/:slug | /product/macbook-pro | { slug: "macbook-pro" } |

---

## Для чого використовується

| Сценарій | Приклад |
|---|---|
| Завантаження даних за ID | fetchUser(params.id) |
| Побудова вкладених маршрутів | /courses/:courseId/lessons/:lessonId |
| Навігація динамічними сторінками | Профілі, товари, статті тощо |
| Вкладені layouts | наприклад, /dashboard/:section |

---

## Приклад реального використання

```javascript
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function ProductPage() {
  const { id } = useParams(); // id from the URL
  const [product, setProduct] = useState(null);

useEffect(() => {
    fetch(`/api/products/${id}`)
      .then(res => res.json())
      .then(setProduct);
  }, [id]);

if (!product) return <p>Loading...</p>;

return <h1>{product.name}</h1>;
}
```

Коли користувач відкриє /products/10, React Router передасть id = "10", і компонент підвантажить потрібний товар.

---

## Приклад із кількома параметрами

```javascript
<Route path="/users/:userId/posts/:postId" element={<UserPost />} />
```

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

function UserPost() {
  const { userId, postId } = useParams();
  return (
    <p>
      User: {userId}, post: {postId}
    </p>
  );
}
```

URL /users/5/posts/10 -> виведе:

```javascript
User: 5, post: 10
```

---

## Важливо пам'ятати

1. useParams() повертає **рядки**, навіть якщо це числа.

```javascript
  const { id } = useParams(); // "42", not 42
  ```
  Якщо потрібне число, перетвори його явно: Number(id).
2. Працює **лише всередині** <Route>, інакше поверне {} (порожній об'єкт).
3. Параметри приходять **лише з тих маршрутів**, де вони описані в path. Наприклад, якщо шлях /about, а ти викликав useParams(), повернеться {}.

---

## Приклад вкладених маршрутів

```javascript
<Route path="/dashboard/:section">
  <Route path="settings" element={<Settings />} />
</Route>
```

```javascript
function Settings() {
  const { section } = useParams(); // section = "dashboard"
  ...
}
```

Параметри можуть «успадковуватися» з батьківських маршрутів.

---

## Відмінність від інших хуків

| Хук | Що робить |
|---|---|
| useParams() | Отримує параметри зі шляху (:id) |
| useSearchParams() | Отримує параметри з query-рядка (?page=2) |
| useLocation() | Дає доступ до всього об'єкта URL (pathname, search, hash, state) |

---

## Підсумок:

> useParams() - хук React Router, який повертає об'єкт із параметрами з динамічної частини URL (:id, :slug тощо).

### Він потрібен для:

- роботи з динамічними маршрутами;
- завантаження даних за ID з URL;
- відображення потрібного контенту для конкретного користувача, товару або статті.

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

Для рев’юера

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

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