Миграция с других роутеров

При переходе с других клиентских роутеров на Navigo ключевым моментом является понимание концепции маршрутизации, которую использует библиотека. Navigo — это лёгкий роутер для JavaScript, который ориентирован на работу с современными SPA-приложениями и поддерживает как hash-based, так и history API маршруты. Переход требует корректного сопоставления существующих маршрутов и их логики с моделью Navigo.

Инициализация Navigo и создание маршрутов

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

import Navigo from 'navigo';

const router = new Navigo('/', { hash: false });
  • Первый аргумент указывает корневой путь приложения.
  • Опция hash определяет, будет ли использован hash-based роутинг или history API.

Создание маршрутов производится методом on:

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

Для маршрутов с одинаковой логикой можно использовать массив:

router.on(['/home', '/dashboard'], () => { console.log('Главная или панель'); });

Перенос маршрутов с React Router

React Router и подобные библиотеки опираются на JSX-компоненты и <Route>:

<Route path="/about" component={About} />
<Route path="/user/:id" component={User} />

Navigo не использует JSX, маршруты настраиваются через объекты или функции. Основные различия:

  1. Компоненты React заменяются функциями обработки маршрута. Вместо рендеринга компонента, вызывается функция, которая может рендерить содержимое в DOM напрямую:
router.on('/about', () => {
  document.getElementById('app').innerHTML = '<h1>О нас</h1>';
});
  1. Динамические параметры используют объект params, а не пропсы.
router.on('/user/:id', ({ id }) => {
  document.getElementById('app').innerHTML = `<h1>Пользователь ${id}</h1>`;
});
  1. Nested routes. Navigo не поддерживает вложенные маршруты так, как React Router. Для имитации необходимо использовать дополнительную логику внутри обработчика:
router.on('/user/:id', ({ id }) => {
  if (id === 'admin') {
    document.getElementById('app').innerHTML = '<h1>Админ</h1>';
  } else {
    document.getElementById('app').innerHTML = `<h1>Пользователь ${id}</h1>`;
  }
});

Перенос с Vue Router

Vue Router использует объект маршрутов с компонентами:

const routes = [
  { path: '/home', component: Home },
  { path: '/profile/:id', component: Profile }
];

При миграции на Navigo:

  • Компоненты Vue заменяются функциями для управления DOM или вызова методов Vue:
router.on('/profile/:id', ({ id }) => {
  // вызов метода Vue или рендер через Vue instance
  app.showProfile(id);
});
  • Можно эмулировать вложенные маршруты через проверку условий внутри обработчика, аналогично React Router.

Обработка событий навигации

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

router.navigate('/about');

При миграции важно перенести логику редиректов и навигационных ссылок:

  • Старые <Link> элементы заменяются на стандартные <a> с onclick:
document.querySelectorAll('a[data-link]').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    router.navigate(link.getAttribute('href'));
  });
});
  • Hash-based маршруты на Navigo работают аналогично # в старых роутерах, но при желании можно перейти на history API.

Перенос middleware и хуков

В React Router и Vue Router часто используются middleware или beforeEnter:

beforeEnter: (to, from, next) => { ... }

В Navigo подобное реализуется через обработку в on или hooks:

router.hooks({
  before: (done, params) => {
    if (!params.userLoggedIn) {
      router.navigate('/login');
    } else {
      done();
    }
  }
});
  • done() продолжает выполнение маршрута.
  • Можно реализовать асинхронные проверки или редиректы.

Миграция динамических маршрутов и wildcard

  • React Router использует * для catch-all:
<Route path="*" component={NotFound} />
  • В Navigo аналог:
router.notFound(() => {
  document.getElementById('app').innerHTML = '<h1>Страница не найдена</h1>';
});
  • Для wildcard в пределах маршрута используется * внутри пути:
router.on('/files/*', ({ splat }) => {
  console.log('Путь к файлу:', splat);
});

splat содержит оставшуюся часть пути после *.

Настройка базового пути и режима history

При миграции с роутеров, использующих history API:

const router = new Navigo('/app', { hash: false });
  • /app — базовый путь для всех маршрутов.
  • hash: true позволяет использовать hash-based маршрутизацию без изменения серверных настроек.
  • При использовании history API необходимо настроить сервер для корректной отдачи index.html на любые пути SPA.

Советы по постепенной миграции

  1. Сначала перенести ключевые маршруты, оставив остальные для поэтапной адаптации.
  2. Использовать универсальные обработчики для совместимости со старыми ссылками.
  3. Проверять динамические параметры и редиректы, чтобы не потерять функциональность.
  4. Интегрировать middleware через hooks, эмулируя старые beforeEnter или guards.

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

Оглавление