Что такое Navigo

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

Navigo поддерживает как hash-based routing (# в URL), так и history API routing, что позволяет создавать чистые URL без хэшей. Библиотека отличается минимальным размером, простотой интеграции и гибкостью настройки.

Инициализация маршрутизатора

Создание нового экземпляра Navigo производится через конструктор:

import Navigo from 'navigo';

const router = new Navigo('/', { 
  hash: false, 
  linksSelector: "a" 
});

Параметры конструктора:

  • root — корневой путь приложения (по умолчанию /).
  • hash — определяет тип маршрутизации: true для hash-based маршрутов, false для history API.
  • linksSelector — CSS-селектор ссылок, которые будут автоматически перехватываться для навигации.

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

Маршруты задаются с помощью метода .on():

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

Особенности маршрутов:

  • Параметры пути обозначаются через двоеточие :, например :id.
  • Можно использовать регулярные выражения для более сложной логики.
  • Методы .on() и .on('*') позволяют задавать как конкретные, так и универсальные маршруты.

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

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

router.navigate('/about');

Метод navigate() изменяет URL и вызывает соответствующий обработчик маршрута. Это особенно полезно для динамических переходов внутри SPA.

Параметры и query строки

Navigo автоматически передаёт параметры маршрута в функцию-обработчик:

router.on('/product/:category/:id', (params, query) => {
  console.log(params.category); // "books"
  console.log(params.id);       // "123"
  console.log(query);           // объект query string, например { ref: 'newsletter' }
});

Для извлечения query параметров используется объект query, который автоматически парсит строку после ?.

Защита маршрутов и редиректы

Navigo поддерживает динамические редиректы и проверку доступа:

router.on('/dashboard', () => {
  if (!userIsLoggedIn()) {
    router.navigate('/login');
    return;
  }
  renderDashboard();
});

Можно задавать условные маршруты, используя callback-функции, проверяющие права пользователя или состояние приложения перед рендерингом страницы.

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

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

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

Для более сложной структуры можно использовать подмаршруты через .on() с объектом:

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

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

Метод .notFound() позволяет задать обработчик для URL, которые не соответствуют ни одному маршруту:

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

Это эквивалент 404-страницы в традиционных приложениях.

Поддержка хуков

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

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

Динамическая генерация ссылок

Для интеграции с HTML-ссылками можно использовать метод link() для автоматической генерации корректного URL:

const link = router.link('/user/42'); // "/user/42"

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

Итог структуры Navigo

  • Минимализм — лёгкая библиотека (~4 KB).
  • Гибкость — поддержка hash и history API.
  • Удобная работа с параметрами — динамические сегменты и query строки.
  • Управление навигацией — метод navigate() и перехват ссылок.
  • Вложенные маршруты — группировка по логике.
  • Обработка ошибок — notFound() для 404.
  • Хуки — возможность выполнения действий до и после маршрута.

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

Оглавление