Хеш-параметры

В Universal Router хеш-параметры используются для обработки маршрутов, где часть URL после символа # (hash) содержит информацию о состоянии приложения. Такие маршруты обычно применяются в одностраничных приложениях (SPA), где необходимо изменять состояние интерфейса без перезагрузки страницы.

Доступ к хешу и его обработка

Хеш доступен через объект location.hash. Однако в контексте маршрутизации Universal Router рекомендуется использовать маршруты с динамическими сегментами, чтобы напрямую сопоставлять части хеша с параметрами:

import UniversalRouter from 'universal-router';

const routes = [
  {
    path: '/#section/:id',
    action: ({ params }) => {
      console.log(params.id); // получаем значение параметра id из хеша
      return `Раздел ${params.id}`;
    }
  }
];

const router = new UniversalRouter(routes);

router.resolve({ pathname: '/#section/42' }).then(console.log);
// Вывод: Раздел 42

Важно помнить, что браузеры по умолчанию передают хеш как часть window.location.hash, и при использовании Universal Router стоит учитывать, что маршруты должны соответствовать формату, который вы передаете в resolve() или при инициализации маршрутизатора.

Динамические сегменты и регулярные выражения

Для более сложных хеш-параметров можно использовать регулярные выражения в пути маршрута:

const routes = [
  {
    path: '/#tab/:name([a-z]+)',
    action: ({ params }) => `Активная вкладка: ${params.name}`
  }
];

router.resolve({ pathname: '/#tab/settings' }).then(console.log);
// Вывод: Активная вкладка: settings

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

Вложенные маршруты с хеш-параметрами

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

const routes = [
  {
    path: '/',
    children: [
      {
        path: '#section/:id',
        action: ({ params }) => `Раздел: ${params.id}`
      },
      {
        path: '#modal/:modalId',
        action: ({ params }) => `Открыт модальный: ${params.modalId}`
      }
    ]
  }
];

router.resolve({ pathname: '/#modal/login' }).then(console.log);
// Вывод: Открыт модальный: login

Использование вложенных маршрутов помогает отделять основные пути от дополнительных состояний интерфейса, передаваемых через хеш.

Обработка событий изменения хеша

Для реактивного обновления интерфейса при изменении хеша можно подписываться на событие hashchange и перенаправлять на соответствующий маршрут:

window.addEventListener('hashchange', () => {
  router.resolve({ pathname: window.location.hash }).then((result) => {
    document.getElementById('app').innerText = result;
  });
});

Такой подход обеспечивает синхронизацию состояния приложения с адресной строкой без перезагрузки страницы.

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

  • Явное указание хеша в маршрутах — всегда использовать символ # в пути при работе с hash-based маршрутизацией.
  • Использование динамических сегментов — позволяет получать значения параметров хеша как объекты params.
  • Регулярные выражения для валидации — ограничивают допустимые значения, предотвращая некорректные состояния.
  • Вложенные маршруты — дают гибкость при комбинировании основного маршрута и состояний интерфейса через хеш.
  • Событие hashchange — используется для реактивного изменения содержимого без перезагрузки страницы.

Хеш-параметры обеспечивают простую и надежную маршрутизацию для SPA, где необходимо управление состоянием приложения напрямую из адресной строки. Их правильное использование с Universal Router позволяет строить гибкие и динамичные интерфейсы, сохраняющие предсказуемое поведение при навигации.

Оглавление