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

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

Що робить 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

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

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

javascript

const { id } = useParams(); // "42", not 42

Якщо потрібне число, перетвори його явно: Number(id). 2. Працює лише всередині , інакше поверне {} (порожній об'єкт). 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;
відображення потрібного контенту для конкретного користувача, товару або статті.

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

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

Premium

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