useParams для доступа к параметрам

useParams — это хук, предоставляемый библиотекой React Router, который позволяет получать параметры маршрута из URL. Он особенно полезен в динамических маршрутах, когда требуется извлечь значения, переданные через путь.

Основы работы с useParams

В React Router параметры маршрута задаются с помощью двоеточия (:) в пути. Например, маршрут для отображения деталей пользователя может быть определён следующим образом:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import UserDetail from "./UserDetail";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:id" element={<UserDetail />} />
      </Routes>
    </Router>
  );
}

Здесь :id — это динамический сегмент маршрута. Он может принимать любое значение, которое будет доступно через useParams.

Получение параметров внутри компонента

Внутри компонента, связанного с маршрутом, можно использовать хук useParams для извлечения этих параметров:

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

function UserDetail() {
  const params = useParams();

  return (
    <div>
      <h2>Детали пользователя</h2>
      <p>ID пользователя: {params.id}</p>
    </div>
  );
}

export default UserDetail;

Ключевые моменты:

  • useParams возвращает объект, где ключи соответствуют именам параметров, указанным в маршруте (:id → params.id).
  • Все параметры являются строками, даже если они содержат числа.
  • Хук всегда возвращает актуальные значения параметров при изменении URL.

Динамические маршруты с несколькими параметрами

Маршрут может содержать несколько параметров:

<Route path="/user/:userId/post/:postId" element={<PostDetail />} />

В компоненте PostDetail можно получить оба параметра:

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

function PostDetail() {
  const { userId, postId } = useParams();

  return (
    <div>
      <h2>Пост пользователя</h2>
      <p>ID пользователя: {userId}</p>
      <p>ID поста: {postId}</p>
    </div>
  );
}

Такой подход упрощает обработку сложных динамических маршрутов без необходимости использования дополнительных методов.

Обработка отсутствующих параметров

Если маршрут рендерится без некоторых параметров, useParams вернёт объект с отсутствующими ключами:

<Route path="/user/:id?" element={<UserDetail />} />

Знак ? делает параметр необязательным. В компоненте это можно обработать так:

const { id } = useParams();
return <p>{id ? `ID: ${id}` : "ID не задан"}</p>;

Совместимость с вложенными маршрутами

useParams автоматически учитывает вложенные маршруты. Рассмотрим пример:

<Routes>
  <Route path="/user/:userId" element={<User />}>
    <Route path="profile" element={<UserProfile />} />
    <Route path="settings" element={<UserSettings />} />
  </Route>
</Routes>

В компоненте UserProfile можно получить параметр userId, даже если это вложенный маршрут:

function UserProfile() {
  const { userId } = useParams();
  return <p>Профиль пользователя {userId}</p>;
}

useParams возвращает все параметры, доступные на текущем уровне маршрутов и выше, что делает его удобным для работы с вложенной навигацией.

Советы по использованию

  • Параметры всегда возвращаются как строки; при необходимости преобразовать в число используйте parseInt или Number.

  • Не стоит хранить параметры в состоянии компонента, если нет необходимости — useParams гарантирует актуальность значений при навигации.

  • Для сложных маршрутов с множественными параметрами удобно использовать деструктуризацию:

    const { id, category } = useParams();

  • Хук работает только внутри компонентов, обернутых Routes или Route.

Примеры практического использования

1. Переход к детали продукта:

<Route path="/products/:productId" element={<ProductDetail />} />

function ProductDetail() {
  const { productId } = useParams();
  // загрузка данных продукта по productId
  return <h1>Продукт #{productId}</h1>;
}

2. Фильтрация контента по категории:

<Route path="/blog/:category?" element={<Blog />} />

function Blog() {
  const { category } = useParams();
  return <h2>{category ? `Категория: ${category}` : "Все статьи"}</h2>;
}

3. Использование в сочетании с useEffect для асинхронной загрузки данных:

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

function UserDetail() {
  const { id } = useParams();
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/users/${id}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [id]);

  if (!user) return <p>Загрузка...</p>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

В этом примере изменение id в URL автоматически обновляет данные пользователя без дополнительной логики.

useParams обеспечивает простой и гибкий способ работы с динамическими сегментами маршрутов, делая маршрутизацию в React приложениях удобной, предсказуемой и полностью интегрированной с компонентной архитектурой.

Оглавление