Параметры маршрута

Параметры маршрута позволяют создавать динамические URL-адреса, в которых часть пути является переменной. Это необходимо, когда одна и та же страница отображает разные данные в зависимости от входного значения — например, профиль пользователя по ID или статья по уникальному slug.

Динамические сегменты

В React Router динамический сегмент пути обозначается двоеточием: :имяПараметра.

Примеры:

  • /user/:id — путь к профилю пользователя с идентификатором id;
  • /product/:slug — страница товара по человекочитаемому имени.

Такой маршрут будет совпадать с любым значением на месте параметра:

  • /user/42 → id = "42"
  • /user/abc → id = "abc"

Извлечение параметров: useParams()

Чтобы получить значение параметра внутри компонента, используется хук useParams() из react-router-dom.

// Маршрут
<Route path="/user/:userId" element={<UserProfile />} />

// Компонент UserProfile.jsx
import { useParams } from 'react-router-dom';

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

Хук возвращает объект, ключи которого соответствуют именам параметров в пути. Все значения — строки.

Применение

Параметры маршрута используются для:

  • отображения детальной информации (пользователь, товар, статья);
  • фильтрации контента (например, /category/:name);
  • создания универсальных шаблонов страниц.

Важно: если параметр необязательный или может отсутствовать, лучше использовать query-параметры (?id=123) или альтернативные маршруты, так как /user/:id не совпадёт с /user.

Ограничения

React Router не проверяет тип или формат параметра. Например, /user/42 и /user/not-a-number оба будут переданы как строка. Валидацию и обработку ошибок нужно реализовывать в самом компоненте.