useParams

Позволяет получить часть адресной строки.

useParams — это хук из react-router-dom, который позволяет извлечь параметры из текущего URL, определённые в маршруте. Параметры — это части пути URL, которые являются переменными (например, /user/:id, где :id — это параметр).

Что делает useParams?

useParams возвращает объект, содержащий все параметры маршрута, которые были определены в с помощью синтаксиса :paramName. Ключи объекта соответствуют именам параметров, а значения — тому, что находится в текущем URL.

Когда использовать useParams?

Когда нужно получить динамические данные из URL, например, ID пользователя, номер поста или категорию.
Для рендеринга контента, зависящего от параметров маршрута.

Пример кода

import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/blog/:category/:postId" element={<BlogPost />} />
    </Routes>
  );
}

function BlogPost() {
  const { category, postId } = useParams(); // Деструктурируем параметры

  return (
    <div>
      <p>Категория: {category}</p>
      <p>ID поста: {postId}</p>
    </div>
  );
}

export default App;

Важно

Тип данных: Значения параметров всегда строки, даже если в URL это числа (например, "123", а не 123).
Отсутствие параметров: Если параметр не определён в маршруте или URL не соответствует маршруту, значение будет undefined.
Совместимость: Работает только внутри компонента, который рендерится через с соответствующим путём.