useLocation для данных о текущем location

В TanStack Router useLocation является хук-функцией, которая предоставляет полный доступ к информации о текущем состоянии маршрутизации. Это ключевой инструмент для динамического реагирования на изменения URL и управления контентом в зависимости от текущего пути.

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

Чтобы использовать useLocation, необходимо импортировать его из основной библиотеки:

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

После этого хук можно вызвать внутри функционального компонента:

function CurrentPath() {
  const location = useLocation();
  console.log(location);
  return <div>Текущий путь: {location.pathname}</div>;
}

В location содержатся следующие важные свойства:

  • pathname — строка, представляющая текущий путь URL без параметров запроса.
  • search — строка с параметрами запроса (начиная с ?).
  • hash — часть URL после #.
  • state — объект состояния, переданный через навигацию.
  • key — уникальный идентификатор текущей записи истории, полезен для отслеживания изменений.

Отслеживание изменений маршрута

useLocation автоматически обновляется при изменении пути, что позволяет использовать его в useEffect или для рендеринга компонентов в зависимости от текущего URL.

import { useEffect } from 'react';
import { useLocation } from '@tanstack/router';

function LogLocation() {
  const location = useLocation();

  useEffect(() => {
    console.log('Маршрут изменился:', location);
  }, [location]);

  return null;
}

Здесь useEffect срабатывает при каждом изменении location, предоставляя актуальные данные для логирования или вызова побочных эффектов.

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

location.pathname содержит путь без параметров запроса, но для работы с query-параметрами нужно использовать URLSearchParams:

const location = useLocation();
const queryParams = new URLSearchParams(location.search);

const page = queryParams.get('page') || '1';
const filter = queryParams.get('filter') || '';

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

Состояние навигации

При переходе между маршрутами можно передавать объект state:

router.navigate({ to: '/profile', search: '?tab=activity', state: { fromDashboard: true } });

Хук useLocation позволит получить это состояние:

const location = useLocation();
console.log(location.state?.fromDashboard); // true

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

Сравнение с useRouter

В отличие от useRouter, который предоставляет методы для навигации и работу с маршрутами, useLocation фокусируется исключительно на чтении текущего состояния маршрута. Он идеален для условного рендеринга и реактивного поведения компонентов при изменении пути.

Практическое применение

  1. Активное выделение меню
const location = useLocation();
const isActive = location.pathname === '/dashboard';
  1. Пагинация и фильтры Использование search позволяет синхронизировать UI с query-параметрами:
const queryParams = new URLSearchParams(location.search);
const page = Number(queryParams.get('page') || 1);
  1. Сохранение предыдущего состояния С помощью state можно реализовать возврат на предыдущую страницу с сохранением фильтров и прокрутки.

Рекомендации по производительности

  • Избегать избыточной деструктуризации location в компонентах, где ререндер зависит только от части данных (например, только pathname).
  • Использовать мемоизацию при сложных вычислениях, основанных на search или state.
  • Для глобального реагирования на изменение маршрута можно использовать отдельный хук, который подписан на location и обновляет только необходимые состояния.

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

function Dashboard() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const page = Number(queryParams.get('page') || 1);
  const filter = queryParams.get('filter') || 'all';

  return (
    <div>
      <h1>Страница {page}</h1>
      <p>Фильтр: {filter}</p>
      <p>Текущий путь: {location.pathname}</p>
    </div>
  );
}

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

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

Оглавление