Концепция клиентской маршрутизации

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

Инициализация Navigo

Для начала работы создается экземпляр маршрутизатора:

import Navigo from 'navigo';

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

Первый параметр '/' задает базовый путь приложения.
Опция hash: true указывает на использование хеш-маршрутов (#) вместо обычных URL. Это важно для поддержки старых браузеров без HTML5 History API.

Определение маршрутов

Маршруты связываются с функциями, которые вызываются при переходе по соответствующему пути:

router.on({
  '/': () => {
    console.log('Главная страница');
  },
  '/about': () => {
    console.log('Страница о проекте');
  },
  '/products/:id': (params) => {
    console.log(`Продукт с ID: ${params.id}`);
  }
});

Простые строки ('/', '/about') соответствуют фиксированным URL.
Параметры маршрута (:id) позволяют обрабатывать динамические сегменты пути. Параметры автоматически передаются в обработчик в объекте params.

Навигация программно

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

router.navigate('/about');

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

Поддержка переходов по ссылкам

Чтобы ссылки <a> корректно работали с Navigo, используется метод link:

document.addEventListener('click', (event) => {
  const target = event.target.closest('a');
  if (target) {
    event.preventDefault();
    router.navigate(target.getAttribute('href'));
  }
});

Этот подход позволяет перехватывать клики по ссылкам и использовать маршрутизатор вместо стандартной навигации браузера.

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

Для маршрутов, которые не определены явно, используется метод notFound:

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

Это обеспечивает централизованное управление ошибками навигации и отображение страницы 404.

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

Navigo поддерживает хуки — функции, выполняемые до или после перехода на маршрут:

router.hooks({
  before: (done, params) => {
    console.log('Перед переходом', params);
    done();
  },
  after: (params) => {
    console.log('После перехода', params);
  }
});

Хук before принимает функцию done, которую необходимо вызвать для продолжения навигации.
Хук after выполняется после того, как маршрут обработан и контент обновлен.

Группировка маршрутов и вложенные маршруты

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

router.on('/admin', {
  '/dashboard': () => console.log('Панель администратора'),
  '/users': () => console.log('Список пользователей')
});

Такое разделение облегчает поддержку больших приложений и структурирование маршрутов.

Параметры и регулярные выражения

Navigo позволяет использовать регулярные выражения для параметров:

router.on('/products/:id(\\d+)', (params) => {
  console.log(`Только числовой ID: ${params.id}`);
});

С помощью регулярных выражений можно ограничивать формат данных в URL.
Это повышает гибкость маршрутизации и предотвращает ошибки обработки.

История и повторные переходы

Navigo использует History API для управления историей браузера. Методы navigate и перехваты ссылок обновляют URL без перезагрузки страницы, а возврат назад (back) и вперед (forward) полностью интегрируются с историей:

router.back();
router.forward();

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

Hash-маршруты (hash: true) — используют # в URL, просты в реализации и совместимы с любыми серверами.
History API (hash: false) — чистые URL без #, позволяют SEO-оптимизацию, но требуют серверной поддержки для корректной обработки всех маршрутов.

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

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