Проверка редиректов

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

Использование `navigate` для редиректа

Метод navigate(path, options) позволяет программно изменить URL и инициировать переход на указанный маршрут. Ключевые моменты:

import Navigo from 'navigo';

const router = new Navigo('/');

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

router.on('/about', () => {
  console.log('О сайте');
});

// Программный редирект с /start на /home
router.on('/start', () => {
  router.navigate('/home');
});

router.resolve();

Особенности:

navigate может принимать второй параметр options с возможностью использования { replace: true }, что позволяет заменять текущую запись в истории браузера вместо создания новой.
Редирект через navigate выполняется мгновенно без перезагрузки страницы.

Редиректы через правила маршрутизации

Иногда необходимо задать правила редиректа на уровне маршрутов. Navigo позволяет использовать функции внутри маршрутов для условного перенаправления:

router.on('/dashboard', () => {
  const isLoggedIn = false;
  if (!isLoggedIn) {
    router.navigate('/login');
  } else {
    console.log('Панель пользователя');
  }
});

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

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

router.on('/profile/:userId', (params) => {
  if (!params.userId) {
    router.navigate('/error');
  }
});

Использование глобального редиректа

Navigo позволяет создавать универсальные редиректы, которые срабатывают для всех маршрутов, соответствующих определённым условиям. Для этого используется событие before:

router.hooks({
  before(done, params, current) {
    const needsRedirect = current.url === '/old-page';
    if (needsRedirect) {
      router.navigate('/new-page');
      done(false); // прерываем текущий маршрут
    } else {
      done(); // продолжаем обработку
    }
  }
});

Важные моменты:

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

Редиректы с сохранением состояния истории

Использование опции { replace: true } в navigate важно при редиректе с точки зрения UX:

router.on('/old-contact', () => {
  router.navigate('/contact', { replace: true });
});

Пояснение:

Без replace: true пользователь сможет вернуться на /old-contact, что может быть нежелательно.
С replace: true текущий URL заменяется, и нажатие «назад» приведёт к предыдущему действительному маршруту.

Редиректы с динамическими маршрутами

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

router.on('/product/:id', (params) => {
  if (!isProductAvailable(params.id)) {
    router.navigate('/products');
  }
});

function isProductAvailable(id) {
  const availableIds = [101, 102, 103];
  return availableIds.includes(Number(id));
}

Особенности:

Проверка параметров маршрута позволяет направлять пользователей на корректные страницы.
Навигация по параметрам маршрутов поддерживается встроенными возможностями Navigo.

Редиректы при 404 и fallback маршрутах

Navigo поддерживает обработку несуществующих маршрутов через метод notFound:

router.notFound(() => {
  router.navigate('/home');
});

Пояснение:

Все URL, которые не совпали с зарегистрированными маршрутами, будут автоматически перенаправлены.
Это особенно важно для SPA, где серверная обработка URL отсутствует.

Комбинация редиректов и ленивой загрузки

Редиректы можно использовать совместно с динамическим импортом модулей:

router.on('/settings', async () => {
  const isAdmin = await checkAdmin();
  if (!isAdmin) {
    router.navigate('/access-denied');
  } else {
    const module = await import('./settingsPage.js');
    module.render();
  }
});

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

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