useResolvedPath для разрешения путей

В библиотеке React Router хук useResolvedPath предоставляет способ корректно вычислять абсолютный путь на основе текущего контекста маршрута. Это особенно полезно при работе с относительными путями, вложенными маршрутами и динамическими ссылками. Хук возвращает объект с информацией о разрешённом пути, который можно использовать для создания ссылок и навигации.

Синтаксис и основные параметры

const resolvedPath = useResolvedPath(to);

Параметры:

  • to — строка или объект, указывающий путь, который требуется разрешить. Может быть:

    • Относительным ("../profile").
    • Абсолютным ("/dashboard/settings").
    • Объектом { pathname, search, hash }.

Возвращаемое значение:

Хук возвращает объект Location, содержащий поля:

  • pathname — абсолютный путь после разрешения.
  • search — строка запроса (?query=1).
  • hash — хэш-фрагмент (#section1).
  • state — состояние, если передано через объект to.

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

import { useResolvedPath, Link } from 'react-router-dom';

function UserProfileLink() {
  const resolved = useResolvedPath('../profile');

  return (
    

      
Ссылка на профиль: {resolved.pathname}

      Перейти в профиль
    

  );
}

В данном примере, если компонент находится на маршруте /dashboard, хук преобразует ../profile в /profile. Таким образом, useResolvedPath гарантирует корректное построение абсолютного пути вне зависимости от вложенности маршрута.

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

to может быть объектом:

const resolved = useResolvedPath({
  pathname: '../settings',
  search: '?tab=privacy',
  hash: '#security'
});

После разрешения resolved.pathname будет абсолютным путем, resolved.search сохранит строку запроса, а resolved.hash — хэш. Это полезно при динамическом формировании ссылок, где необходимо сохранять все параметры URL.

Хук особенно удобен для построения ссылок в компонентах Link и NavLink:

import { useResolvedPath, NavLink } from 'react-router-dom';

function NavigationItem({ to, label }) {
  const resolved = useResolvedPath(to);

  return (
     isActive ? 'active' : ''}>
      {label}
    
  );
}

Даже если to передаётся как относительный путь, NavLink будет корректно работать с абсолютным значением resolved.pathname, позволяя правильно подсвечивать активный маршрут.

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

  • useLocation возвращает текущий объект маршрута (pathname, search, hash) без разрешения относительных путей.
  • useNavigate используется для навигации, а не для вычисления путей.
  • useResolvedPath решает проблему построения правильного абсолютного пути на основе текущего контекста маршрута.

Практическая рекомендация

useResolvedPath особенно полезен в следующих случаях:

  1. Вложенные маршруты Для компонентов внутри маршрутов с несколькими уровнями вложенности, когда ссылки должны строиться относительно текущего пути.

  2. Динамические ссылки Если путь зависит от пропсов или состояния компонента.

  3. Ссылки с параметрами URL Когда необходимо объединить относительные пути с query-параметрами и hash-фрагментами.

Разрешение относительных сегментов

useResolvedPath автоматически обрабатывает:

  • . — текущая директория.
  • .. — подняться на один уровень вверх.
  • Множественные уровни ../. ./ для корректного навигационного дерева.

Пример:

const resolved = useResolvedPath('../. ./reports/2026');
console.log(resolved.pathname);
// Если текущий путь '/dashboard/users', результат будет '/reports/2026'

Итоговые ключевые моменты

  • Хук всегда возвращает абсолютный путь, независимо от того, был ли to относительным или абсолютным.
  • Сохраняет параметры поиска (search) и хэш (hash) при работе с объектами.
  • Упрощает создание динамических и вложенных ссылок, совместимых с Link и NavLink.
  • Полезен в сложных маршрутизируемых приложениях, где важна точность формирования URL.
Оглавление