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

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

Подключение и базовое использование

Чтобы использовать useMatch, необходимо импортировать его из TanStack Router:

import { useMatch } from '@tanstack/router';

Простейший пример использования:

const match = useMatch('/dashboard');

В данном случае match будет объектом, если текущий путь совпадает с '/dashboard', и null, если не совпадает.

Ключевой момент: useMatch не перенаправляет пользователя автоматически. Он только предоставляет информацию о совпадении маршрута.

Работа с параметрами маршрута

useMatch позволяет проверять маршруты с динамическими параметрами. Например, маршрут с параметром id:

const match = useMatch('/users/:id');

Если текущий путь /users/42, объект match будет содержать:

{
  params: { id: '42' },
  pathname: '/users/42',
  route: RouteObject // объект маршрута из TanStack Router
}

Доступ к параметрам осуществляется через match.params. Это позволяет легко получать значения динамических сегментов пути и использовать их в компонентах:

const { id } = match.params;

Определение активного маршрута

Для визуального выделения активного элемента навигации useMatch используется вместе с условной логикой:

const dashboardMatch = useMatch('/dashboard');

return (
  
);

Здесь класс active применяется только если текущий маршрут совпадает с /dashboard.

Проверка вложенных маршрутов

useMatch поддерживает точное и неполное совпадение маршрута. По умолчанию совпадение считается неполным, то есть совпадение с /users будет истинным также для /users/42.

Для точного совпадения передается опция exact:

const match = useMatch('/users', { exact: true });

Теперь match вернёт объект только если текущий путь строго равен /users.

Совмещение с навигацией и ссылками

Для интеграции с компонентами навигации можно использовать useMatch совместно с Link:

import { Link } from '@tanstack/router';

const isActive = useMatch('/profile');

return (
  
    Profile
  
);

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

Примеры сложных сценариев

  1. Несколько совпадений:
const matches = [
  useMatch('/users/:id'),
  useMatch('/settings')
];

const isActive = matches.some(Boolean);

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

  1. Совмещение с состоянием приложения:
const match = useMatch('/cart');

const [highlight, setHighlight] = useState(false);

useEffect(() => {
  if (match) setHighlight(true);
  else setHighlight(false);
}, [match]);

Хук позволяет синхронизировать визуальные состояния с текущим маршрутом.

Важные особенности

  • useMatch реагирует на изменение маршрута автоматически — компонент перерисовывается при смене пути.
  • Поддерживает динамические параметры и вложенные маршруты.
  • Совместим с другими хуками TanStack Router, такими как useNavigate и useParams.
  • Не производит перенаправления или побочных эффектов — отвечает исключительно за проверку совпадения маршрута.
Оглавление