Доступность навигации

Navigo — это легковесная библиотека для клиентского роутинга в JavaScript, которая позволяет управлять состоянием приложения через URL без перезагрузки страницы. Она работает на основе HTML5 History API и поддерживает как динамические маршруты, так и статические. Основной объект — Navigo — создаётся с указанием базового пути и опций для точного контроля маршрутизации.

import Navigo from 'navigo';

const router = new Navigo('/', { hash: true });

Здесь ключевым моментом является использование hash: true, что позволяет маршрутам работать даже в браузерах без поддержки History API.

Регистрация маршрутов

Маршруты в Navigo задаются с помощью метода .on(). Он принимает строку пути и функцию-обработчик:

router.on('/home', () => {
  console.log('Главная страница');
});

router.on('/about', () => {
  console.log('О сайте');
});

Динамические параметры задаются через двоеточие:

router.on('/user/:id', (params) => {
  console.log(`Пользователь с ID: ${params.id}`);
});

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

  • :id — переменная часть пути, которая доступна через объект params.
  • Поддерживаются регулярные выражения для сложных шаблонов.

Навигация по маршрутам

Для программного перехода между страницами используется метод .navigate():

router.navigate('/home');

Это не вызывает перезагрузку страницы, но обновляет URL и запускает соответствующий обработчик.

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

  • Можно передавать объект с опциями, например { replace: true }, чтобы заменить текущую запись в истории.

  • Поддерживается навигация на маршруты с параметрами:

    router.navigate('/user/42');

Обработка ошибок и маршрутов по умолчанию

Navigo позволяет задавать маршрут по умолчанию через .notFound():

router.notFound(() => {
  console.log('Страница не найдена');
});

Также поддерживается группировка маршрутов через .on() с объектом:

router.on({
  '/': () => console.log('Главная'),
  '/contact': () => console.log('Контакты'),
  '/blog/:slug': (params) => console.log(params.slug)
});

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

Использование хуков

Navigo поддерживает хуки для управления доступом к маршрутам и выполнения логики перед навигацией.

router.hooks({
  before: (done, match) => {
    console.log('Проверка перед переходом на:', match.url);
    done();
  },
  after: (match) => {
    console.log('Переход завершён на:', match.url);
  }
});
  • before — вызывается до активации маршрута. Можно использовать для проверки прав пользователя.
  • after — вызывается после смены маршрута, полезно для аналитики или обновления интерфейса.

Привязка маршрутов к DOM

Для интеграции с кнопками и ссылками удобно использовать атрибуты data-navigo:

<a href="/about" data-navigo>О сайте</a>

В JavaScript необходимо вызвать метод .updatePageLinks(), чтобы Navigo обработал все ссылки на странице:

router.updatePageLinks();

Это позволяет использовать обычные <a> элементы без кастомного кода для кликов.

Настройка режима History и hash

Navigo может работать в двух режимах:

  1. History API (по умолчанию):
const router = new Navigo('/');
  • Чистые URL (/home, /about)
  • Требует настройки сервера для перенаправления всех маршрутов на индексный файл.
  1. Hash-based маршрутизация:
const router = new Navigo('/', { hash: true });
  • URL вида /#/home
  • Работает без серверной настройки
  • Удобно для SPA без полноценного бекенда

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

Для сложных приложений часто нужны маршруты с условными параметрами:

router.on('/product/:id(\\d+)', (params) => {
  console.log('ID продукта:', params.id);
});
  • :id(\\d+) — позволяет принимать только числовые значения.
  • Поддерживаются любые регулярные выражения для валидации параметров.

Асинхронные обработчики

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

router.on('/profile/:id', async (params) => {
  const response = await fetch(`/api/user/${params.id}`);
  const user = await response.json();
  console.log(user);
});
  • Navigo корректно обрабатывает промисы, задерживая выполнение до завершения асинхронной функции.
  • Позволяет строить SPA с ленивой подгрузкой контента.

Использование маршрутов с вложенной структурой

Navigo поддерживает вложенные маршруты, что облегчает создание сложных интерфейсов:

router.on('/dashboard', () => console.log('Dashboard'))
      .on('/dashboard/settings', () => console.log('Настройки'))
      .on('/dashboard/profile', () => console.log('Профиль'));
  • Можно использовать объект для вложенных маршрутов с единым обработчиком.
  • Упрощает поддержку крупных SPA с несколькими уровнями навигации.

Интеграция с фреймворками

Navigo легко интегрируется с популярными библиотеками фронтенда:

  • Vanilla JS — полноценное управление DOM и состоянием.
  • React / Vue — Navigo может быть использован для простых SPA без дополнительного роутера.
  • Поддержка асинхронного рендеринга компонентов и ленивой загрузки страниц.

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

Navigo предоставляет доступ к объекту router.lastRouteResolved():

const lastRoute = router.lastRouteResolved();
console.log(lastRoute.url);  // Текущий путь
console.log(lastRoute.params); // Параметры маршрута
  • Позволяет сохранять состояние приложения при возврате на предыдущие страницы.
  • Удобно для SPA с многоуровневой навигацией и историей действий пользователя.

Советы по организации маршрутов

  • Группировать маршруты по логическим блокам через объекты.
  • Использовать динамические параметры для универсальных страниц.
  • Применять хуки для проверки авторизации и аналитики.
  • Использовать updatePageLinks() после динамического изменения DOM.

Navigo обеспечивает лёгкий и гибкий способ управления навигацией в SPA, сохраняя чистоту URL, поддержку динамических маршрутов, асинхронной загрузки и интеграцию с различными структурами фронтенд-приложений. Такой подход минимизирует зависимость от сторонних роутеров и обеспечивает полный контроль над состоянием приложения.

Оглавление