Конфигурация для production

Библиотека Navigo обеспечивает управление маршрутизацией в одностраничных приложениях (SPA) на JavaScript. Для production-окружения важно правильно настроить маршрутизатор, чтобы обеспечить стабильность, корректную работу ссылок и минимизацию ошибок при деплое.

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

Для production обычно используют строгий режим hash или history, в зависимости от конфигурации сервера.

import Navigo from 'navigo';

const router = new Navigo('/', { 
    strategy: 'ALL', // 'ALL' или 'PATH' в зависимости от сервера
    hash: false      // true — использовать хэш-роутинг, false — history API
});

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

  • hash: true — подходит для статических серверов, где нет поддержки rewrite rules.
  • hash: false — использует History API и требует настройки сервера для возврата index.html на все маршруты.

Настройка базового пути (root)

В production важно явно указать базовый путь приложения, особенно если приложение находится не в корне домена:

const router = new Navigo('/app/', { hash: false });
  • /app/ — корневой путь приложения.
  • Это предотвращает ошибки при обновлении страницы на вложенных маршрутах.

Режим useHash против History API

Hash-режим (useHash: true) проще в настройке:

  • Все маршруты выглядят как example.com/#/dashboard.
  • Не требует server-side настройки.

History API (useHash: false) выглядит «чисто»:

  • Маршруты как example.com/dashboard.
  • Сервер должен отдавать index.html на все запросы к несуществующим файлам.

Настройка для Express:

app.use(express.static('dist'));

app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});

Роуты с параметрами и регулярными выражениями

Production-приложения часто используют динамические маршруты с параметрами:

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

Защита от ошибок маршрутизации

В production важно обработать несуществующие маршруты:

router.notFound(() => {
    document.body.innerHTML = '<h1>Страница не найдена</h1>';
});
  • Предотвращает падение приложения при случайном переходе на несуществующий URL.
  • Можно делать редирект на главный маршрут:
router.notFound(() => {
    router.navigate('/');
});

Lazy-loading и оптимизация

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

router.on('/dashboard', async () => {
    const module = await import('./pages/dashboard.js');
    module.render();
});
  • Разделяет код на чанки.
  • Ускоряет первый рендер приложения.

Навигация и обновление URL

Для production важно контролировать историю браузера:

router.navigate('/dashboard'); // программная навигация
router.updatePageLinks();      // обновление всех <a> с data-navigo
  • updatePageLinks() автоматически перехватывает клики на ссылках.
  • Предотвращает полные перезагрузки страницы.

Настройка глобальных опций

Для production стоит явно указать ключевые опции:

const router = new Navigo('/', {
    hash: false,
    linksSelector: 'a',  // селектор ссылок для перехвата
    strategy: 'ALL',     // оптимизация для сервера
    noMatchWarning: false // отключение предупреждений в консоли
});
  • linksSelector позволяет ограничить область перехвата.
  • strategy: 'ALL' улучшает поддержку nested routes на сервере.
  • noMatchWarning: false отключает лишние сообщения в консоли.

Резюме

Для production важно:

  • Выбрать правильный режим маршрутизации (hash или history).
  • Установить корректный базовый путь.
  • Настроить обработку 404 и защиту от некорректных URL.
  • Использовать динамический импорт для ленивой загрузки.
  • Контролировать обновление ссылок и историю браузера.
  • Оптимизировать глобальные опции для минимизации ошибок и предупреждений.

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

Оглавление