useMatch для проверки совпадения маршрута

useMatch — это хук из библиотеки React Router, который позволяет определить, соответствует ли текущий URL определённому маршруту. Он возвращает объект совпадения, содержащий информацию о параметрах, пути и других свойствах, если URL соответствует шаблону, или null, если совпадения нет. Это особенно полезно для условного рендеринга компонентов на основе текущего маршрута.

Импорт и базовое использование

Для работы с useMatch необходимо импортировать его из react-router-dom:

import { useMatch } from 'react-router-dom';

Простейший пример:

function ProfileLink() {
  const match = useMatch('/profile/:userId');

  if (match) {
    console.log('Совпадение найдено:', match.params.userId);
  }

  return <div>Проверка маршрута завершена</div>;
}

В этом примере useMatch проверяет, соответствует ли текущий URL шаблону /profile/:userId. Если совпадение существует, объект match содержит ключевые данные:

  • params — объект с параметрами маршрута (userId в данном случае)
  • pathname — путь, который был сопоставлен
  • pattern — шаблон маршрута, использованный для проверки совпадения

Структура возвращаемого объекта

Объект, возвращаемый useMatch, имеет следующую структуру:

{
  params: { [key: string]: string },
  pathname: string,
  pattern: {
    path: string,
    caseSensitive: boolean,
    end: boolean
  }
}

  • params — параметры из маршрута (например, :id или :slug)

  • pathname — фактический путь, который совпал с шаблоном

  • pattern — информация о шаблоне маршрута, включая:

    • path — строка маршрута
    • caseSensitive — учитывается ли регистр при сравнении
    • end — совпадение должно быть полным до конца строки (аналог exact в предыдущих версиях)

Параметры шаблона маршрута

useMatch поддерживает сложные шаблоны с динамическими параметрами:

const match = useMatch('/posts/:postId/comments/:commentId');

Если текущий URL /posts/42/comments/7, объект match.params будет:

{
  postId: '42',
  commentId: '7'
}

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

Опции useMatch

При использовании useMatch можно передавать объект с дополнительными опциями вместо простой строки:

const match = useMatch({
  path: '/about',
  caseSensitive: true,
  end: true
});
  • path — маршрут для проверки совпадения
  • caseSensitive — учитывать ли регистр символов (по умолчанию false)
  • end — проверять совпадение только в конце URL (по умолчанию true)

Условный рендеринг на основе маршрута

useMatch часто применяется для изменения интерфейса в зависимости от текущего маршрута. Пример с активным классом для меню:

function NavLink({ to, children }) {
  const match = useMatch({ path: to, end: true });

  return (
    <a href={to} className={match ? 'active' : ''}>
      {children}
    </a>
  );
}

В этом случае ссылка получает класс active, если текущий URL полностью совпадает с маршрутом to.

Работа с вложенными маршрутами

useMatch поддерживает вложенные маршруты. При проверке совпадения с дочерним маршрутом объект match будет включать только параметры для соответствующего шаблона:

function Comment() {
  const match = useMatch('/posts/:postId/comments/:commentId');

  if (!match) return null;

  return <div>Комментарий {match.params.commentId} поста {match.params.postId}</div>;
}

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

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

useMatch удобен для извлечения динамических параметров URL и последующей загрузки данных с сервера:

function Post() {
  const match = useMatch('/posts/:postId');
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    if (match) {
      fetch(`/api/posts/${match.params.postId}`)
        .then(res => res.json())
        .then(data => setPost(data));
    }
  }, [match]);

  if (!post) return <div>Загрузка...</div>;
  return <h1>{post.title}</h1>;
}

Отличие от useParams и useLocation

  • useParams всегда возвращает параметры текущего маршрута, но не проверяет конкретный шаблон.
  • useLocation предоставляет объект текущего URL (pathname, search, hash), но не сообщает о совпадении маршрута.
  • useMatch сочетает проверку маршрута и извлечение параметров в одном хукe.

Итоговые рекомендации по применению

  • Использовать для условного рендеринга элементов интерфейса по маршруту.
  • Получать параметры URL для динамических страниц.
  • Применять при работе с вложенными маршрутами для точного сопоставления.
  • Комбинировать с useNavigate для навигации на основе совпадений.

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

Оглавление