Hooks API

TanStack Router предоставляет мощный и гибкий способ управления маршрутами в приложениях на JavaScript и TypeScript, включая React. Hooks API является центральным инструментом для интеграции маршрутов с компонентами, позволяя подписываться на состояние маршрутов, работать с параметрами URL и осуществлять навигацию.

useRouter

useRouter — основной хук для доступа к объекту роутера в любом компоненте. Он возвращает экземпляр роутера с полным набором методов и свойств:

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

function MyComponent() {
  const router = useRouter();

  function navigateToHome() {
    router.navigate({ to: '/' });
  }

  return ;
}

Ключевые возможности useRouter:

  • router.navigate(options) — программная навигация.
  • router.currentRoute — текущий активный маршрут.
  • router.prefetch(options) — предзагрузка данных для маршрута.
  • Полная поддержка TypeScript для строгой типизации путей и параметров.

useMatch

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

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

const route = useMatch('/users/:userId');

console.log(route.params.userId);

Особенности:

  • Автоматическое извлечение параметров (params) и query-параметров (searchParams).
  • Поддержка вложенных маршрутов и wildcard-путей.
  • Реактивное обновление при изменении URL.

useSearchParams и useParams

Для работы с параметрами URL существуют отдельные хуки:

useParams — получает динамические параметры маршрута:

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

const { userId } = useParams();

useSearchParams — для query-параметров:

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

const [searchParams, setSearchParams] = useSearchParams();

const page = searchParams.get('page') ?? 1;
setSearchParams({ page: 2 });

Особенности:

  • Автоматическая синхронизация с URL.
  • Поддержка реактивного обновления компонента при изменении параметров.
  • Возможность обновления query-параметров без перезагрузки страницы.

useNavigate

useNavigate предоставляет удобный интерфейс для программной навигации с поддержкой всех возможностей роутера:

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

function NavigateButton() {
  const navigate = useNavigate();

  return (
    
  );
}

Важные моменты:

  • to — путь маршрута или объект с маршрутными параметрами.
  • replace — заменяет текущий URL вместо добавления в историю.
  • scroll — контролирует поведение скролла при навигации.

useRouteLoader

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

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

const userData = useRouteLoader({ routeId: 'userRoute' });

Преимущества:

  • Интеграция с серверной загрузкой данных (fetch, GraphQL, REST).
  • Поддержка предзагрузки маршрутов (prefetch).
  • Автоматическое обновление при изменении параметров маршрута.

useIsActive

Хук useIsActive позволяет проверять, активен ли конкретный маршрут или путь:

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

const isActive = useIsActive({ to: '/profile' });

Особенности:

  • Поддержка опций exact и includeChildren.
  • Используется для динамического выделения активных ссылок в навигационных меню.

Рекомендации по использованию Hooks API

  • Использовать useRouter для глобальной навигации и доступа к текущему состоянию роутера.
  • Для компонентов, зависящих от URL-параметров, отдавать предпочтение useMatch или useParams.
  • Всегда использовать useRouteLoader для данных, связанных с маршрутом, чтобы избежать дублирования запросов.
  • Предпочтительно комбинировать useSearchParams с локальным состоянием компонента для удобного управления query-параметрами.

Взаимодействие хуков между собой

Hooks API TanStack Router построен так, чтобы различные хуки можно было комбинировать:

function UserProfile() {
  const { userId } = useParams();
  const userData = useRouteLoader({ routeId: 'userRoute' });
  const navigate = useNavigate();

  if (!userData) return 
Loading...
;

  return (
    

      
{userData.name}

      
    

  );
}

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

Оглавление