Параметры хеша

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

Определение и структура хеша

В TanStack Router хеш доступен через объект location или напрямую через хуки маршрутизатора. Пример стандартного URL с хешем:

https://example.com/dashboard#section=profile&tab=settings
  • # — начало хеша.
  • Параметры разделяются символом &.
  • Каждая пара имеет формат ключ=значение.

Внутри TanStack Router хеш обрабатывается как отдельный источник состояния маршрута. Основное преимущество — возможность управлять интерфейсом без изменения основной части URL, что особенно полезно для одностраничных приложений (SPA).

Получение параметров хеша

Для извлечения параметров хеша используется хук useSearch или прямой доступ через объект router.state.location.hash. Пример с хуком:

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

function SectionViewer() {
  const router = useRouter();
  const hash = router.state.location.hash; // "#section=profile&tab=settings"
  
  const params = Object.fromEntries(
    new URLSearchParams(hash.replace(/^#/, ''))
  );
  
  console.log(params); // { section: "profile", tab: "settings" }
}

Ключевые моменты:

  • Символ # удаляется перед обработкой.
  • URLSearchParams позволяет преобразовать строку хеша в объект с ключами и значениями.
  • Извлечённые параметры можно использовать для рендеринга компонентов или управления состоянием интерфейса.

Изменение параметров хеша

Изменение параметров хеша выполняется через методы маршрутизатора:

router.navigate({
  hash: '#section=notifications&tab=activity'
});

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

  • Навигация по хешу не вызывает перезагрузку страницы.
  • Состояние хеша автоматически синхронизируется с историей браузера.
  • Можно комбинировать с query-параметрами или динамическими сегментами маршрута.

Динамическое обновление отдельных параметров

Часто требуется менять только один параметр хеша, сохраняя остальные:

const updateHashParam = (key, value) => {
  const hashParams = new URLSearchParams(router.state.location.hash.replace(/^#/, ''));
  hashParams.set(key, value);

  router.navigate({ hash: `#${hashParams.toString()}` });
};

updateHashParam('tab', 'settings');

Пояснение:

  • Сначала извлекаются текущие параметры.
  • Метод set изменяет или добавляет новый ключ.
  • Метод navigate обновляет URL без перезагрузки страницы.
  • Такой подход минимизирует вероятность потери состояния других параметров хеша.

Слежение за изменениями хеша

Для реакции на изменения хеша используется подписка на состояние маршрутизатора:

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

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

  useEffect(() => {
    const unsubscribe = router.subscribe(({ location }) => {
      const hash = location.hash.replace(/^#/, '');
      console.log('Хеш изменён:', hash);
    });

    return () => unsubscribe();
  }, [router]);
}
  • Подписка позволяет реагировать на любые изменения хеша, включая навигацию назад/вперёд.
  • Можно использовать для обновления состояния компонентов, вызова API или анимаций интерфейса.

Синхронизация состояния компонентов с хешем

Хеш-параметры часто применяются для управления вкладками, аккордеонами или фильтрами:

function TabManager() {
  const router = useRouter();
  const hashParams = Object.fromEntries(
    new URLSearchParams(router.state.location.hash.replace(/^#/, ''))
  );

  const activeTab = hashParams.tab || 'overview';

  const setTab = (tab) => {
    const params = new URLSearchParams(router.state.location.hash.replace(/^#/, ''));
    params.set('tab', tab);
    router.navigate({ hash: `#${params.toString()}` });
  };

  return (
    

      
      
      
Активная вкладка: {activeTab}

    

  );
}
  • При изменении хеша компонент автоматически обновляет активную вкладку.
  • Состояние URL становится источником правды для интерфейса, упрощая синхронизацию между вкладками и ссылками.

Советы по работе с параметрами хеша

  • Всегда использовать URLSearchParams для безопасного парсинга и формирования хеша.
  • Избегать ручной конкатенации строк для предотвращения ошибок кодирования.
  • Поддерживать единый стиль ключей (например, camelCase или snake_case) для предсказуемого доступа.
  • Использовать router.subscribe для централизованного слежения за хешем при сложных интерфейсах.
Оглавление