useRouter для доступа к инстансу роутера

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

Получение инстанса роутера

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

function MyComponent() {
  const router = useRouter();
  
  console.log(router); // Выведет объект роутера со всеми методами и свойствами
}

Инстанс, возвращаемый useRouter, включает:

  • Методы для навигации (navigate, history, replace, goBack).
  • Текущий маршрут (currentRoute).
  • Параметры маршрута (params).
  • Методы для работы с состоянием (prefetch, invalidate).

Навигация с помощью useRouter

Метод navigate позволяет программно переходить на другой маршрут. Поддерживаются как абсолютные, так и относительные пути.

router.navigate({
  to: '/dashboard',
  params: { userId: 123 },
  search: { filter: 'active' },
});
  • to — путь или маршрут, на который необходимо перейти.
  • params — объект параметров маршрута.
  • search — объект query-параметров.

navigate также может принимать опцию replace: true для замены текущей записи в истории без добавления новой.

Доступ к текущему маршруту и параметрам

Инстанс роутера содержит текущее состояние маршрута и все связанные с ним данные:

const { currentRoute } = router;

console.log(currentRoute.id); // идентификатор маршрута
console.log(currentRoute.params); // параметры маршрута
console.log(currentRoute.search); // query-параметры

Прямой доступ к параметрам и query позволяет реализовать динамические интерфейсы, реагирующие на изменение URL без необходимости отдельного состояния.

Управление историей и навигацией

Инстанс роутера предоставляет методы работы с историей:

  • router.history.back() — аналог window.history.back().
  • router.history.forward() — аналог window.history.forward().
  • router.history.go(n) — перемещение на n шагов вперед/назад в истории.

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

Префетчинг и оптимизация

Метод prefetch позволяет заранее загружать данные и компоненты маршрута, что улучшает производительность:

router.prefetch({ to: '/profile', params: { userId: 42 } });
  • Загружает компонент маршрута и связанные асинхронные данные до фактического перехода.
  • Уменьшает время отклика при навигации.

Метод invalidate используется для сброса кешированных данных маршрута:

router.invalidate({ to: '/dashboard' });

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

Реактивность и подписка на изменения маршрута

useRouter возвращает объект, который автоматически обновляется при изменении маршрута. Это обеспечивает реактивность компонентов:

function RouteWatcher() {
  const router = useRouter();
  
  useEffect(() => {
    console.log('Текущий маршрут изменился:', router.currentRoute.id);
  }, [router.currentRoute]);
}

Таким образом, любой компонент может отслеживать изменения маршрута и обновлять интерфейс без ручного управления состоянием.

Программное управление вложенными маршрутами

При работе с вложенными маршрутами инстанс роутера позволяет точно управлять переходами на конкретные подмаршруты:

router.navigate({ to: '/dashboard/settings', params: { tab: 'privacy' } });

Это обеспечивает удобное построение многоуровневой навигации и динамических страниц с вложенной структурой.

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

Оглавление