Организация роутов

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

Создание экземпляра Navigo

Для начала необходимо создать объект Navigo. Конструктор принимает базовый URL и опции конфигурации.

import Navigo from 'navigo';

const router = new Navigo('/', { 
    hash: true,       // Использование hash-based маршрутов
    noMatchWarning: true // Логирование предупреждений при отсутствии маршрута
});
  • hash: true — маршруты будут работать через хэш (#), что полезно для статических серверов.
  • noMatchWarning: true — вывод предупреждений в консоль при несоответствии маршрута.

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

Роуты задаются через метод on(path, handler):

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

router.on('/about', () => {
    console.log('Страница "О нас"');
});

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

  • Путь может быть простым ('/home') или динамическим ('/user/:id').
  • Функция-обработчик принимает объект параметров для динамических роутов.
router.on('/user/:id', (params) => {
    console.log(`Пользователь с ID: ${params.id}`);
});

Группировка роутов

Для организации большого количества маршрутов удобно использовать группы. Метод on принимает объект с ключами-путями и значениями-функциями:

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

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

Динамические сегменты и опциональные параметры

Navigo поддерживает динамические сегменты (:param) и опциональные сегменты (:param?):

router.on('/blog/:postId/:commentId?', (params) => {
    console.log('Post ID:', params.postId);
    if (params.commentId) console.log('Comment ID:', params.commentId);
});
  • Динамический сегмент обязательный.
  • С вопросительным знаком ? сегмент становится опциональным.

Использование регулярных выражений для роутов

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

router.on('/order/:orderId(\\d+)', (params) => {
    console.log('Order ID:', params.orderId);
});
  • \\d+ гарантирует, что параметр состоит только из цифр.

Роуты с несколькими обработчиками

Navigo позволяет назначать несколько функций для одного маршрута, используя массив:

router.on('/dashboard', [
    () => console.log('Инициализация Dashboard'),
    () => console.log('Загрузка данных')
]);

Функции выполняются по порядку.

Роуты с именами и переход по имени

Можно присвоить роуту имя для удобного программного перехода:

router.on('/profile/:id', { as: 'profile', uses: (params) => console.log(params.id) });

router.navigate('profile', { id: 42 });
  • as задаёт имя маршрута.
  • uses — обработчик, альтернативный синтаксис.
  • navigate позволяет переходить к маршруту по имени и передавать параметры.

Обработка отсутствующих маршрутов

Метод notFound задаёт глобальный обработчик для всех несопоставленных URL:

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

Поддержка хеша и History API

  • Hash-based маршруты: URL содержит #, совместимы с любыми серверами.
  • History API: чистые URL без #. Включается опцией { hash: false } и требует корректной настройки сервера.
const router = new Navigo('/', { hash: false });

Обновление и перезапуск роутера

Методы updatePageLinks и resolve используются для управления ссылками и активации маршрутов:

router.updatePageLinks(); // Перехватывает клики по ссылкам <a>
router.resolve();         // Запускает роутер на текущем URL

Это особенно важно при динамически создаваемых ссылках или после AJAX-загрузки контента.

Вложенные роуты

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

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

Вложенные роуты позволяют структурировать логику приложения по разделам и модулям.

Принципы организации

  1. Группировка по модулям — каждый раздел приложения имеет свой набор роутов.
  2. Именование роутов — облегчает переход по ссылкам и изменение URL.
  3. Динамические сегменты — используют для параметров, таких как ID пользователя.
  4. Обработчики по умолчанию — notFound для страниц 404 и default для корневого маршрута.
  5. Регулярные выражения — для строгой валидации параметров.
  6. Методы управления ссылками — updatePageLinks для корректной работы SPA после изменений DOM.

Пример комплексной конфигурации

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

router.on({
    '/': () => console.log('Главная'),
    '/about': () => console.log('О нас'),
    '/user/:id': (params) => console.log(`Пользователь ${params.id}`),
    '/blog/:postId/:commentId?': (params) => {
        console.log('Пост', params.postId);
        if (params.commentId) console.log('Комментарий', params.commentId);
    }
}).notFound(() => console.log('Страница не найдена'));

router.updatePageLinks();
router.resolve();

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

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

Оглавление