Редиректы при ошибках

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

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

Для обработки ошибок при навигации используется метод notFound. Этот метод позволяет определить функцию, которая будет вызываться, если ни один из зарегистрированных маршрутов не совпадает с текущим URL. Пример использования:

const router = new Navigo('/');

router.on({
  '/home': () => { console.log('Главная страница'); },
  '/about': () => { console.log('О нас'); }
}).notFound(() => {
  console.log('Маршрут не найден, перенаправление на главную страницу');
  router.navigate('/home');
});

router.resolve();

Ключевой момент: Метод notFound срабатывает только тогда, когда URL не совпадает ни с одним зарегистрированным маршрутом. Внутри обработчика можно выполнять перенаправление через router.navigate() на любой существующий маршрут, например, на страницу ошибки 404 или главную страницу.

Перенаправление на страницу ошибки

Создание отдельного маршрута для ошибок позволяет централизованно управлять некорректными URL:

router.on('/error', () => {
  document.body.innerHTML = '<h1>Ошибка 404: Страница не найдена</h1>';
});

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

Преимущества такого подхода:

Возможность хранить отдельный шаблон для страниц ошибок.
Унификация логики обработки всех некорректных маршрутов.
Поддержка навигации через браузерные кнопки “Назад” и “Вперед”, поскольку редирект осуществляется через router.navigate().

Использование wildcard-маршрутов для частичных совпадений

Navigo поддерживает wildcard-маршруты, которые помогают обрабатывать динамические сегменты URL, но их также можно применять для редиректов при ошибках:

router.on('/user/*', (params) => {
  console.log('Пользовательский профиль:', params);
}).notFound(() => {
  router.navigate('/error');
});

Особенность: Wildcard-маршруты позволяют перехватывать часть URL, но если оставшаяся часть не соответствует ни одному маршруту, вызовется notFound. Таким образом, можно комбинировать динамические маршруты с централизованным редиректом на страницу ошибки.

Асинхронные операции при редиректах

Обработчик notFound может содержать асинхронный код, например, проверку данных на сервере перед перенаправлением. Пример:

router.notFound(async () => {
  const response = await fetch('/api/check-redirect');
  const data = await response.json();
  
  if (data.redirect) {
    router.navigate(data.target);
  } else {
    router.navigate('/error');
  }
});

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

Перенаправления с сохранением истории

Метод router.navigate(path, { history: true }) позволяет контролировать историю браузера при редиректе. По умолчанию history включена, что позволяет пользователю возвращаться на предыдущие страницы. Пример:

router.notFound(() => {
  router.navigate('/home', { history: true });
});

Совет по использованию: Для страниц ошибок часто логичнее не добавлять редирект в историю, чтобы пользователь мог использовать кнопку “Назад” для возврата на предыдущий корректный маршрут:

router.notFound(() => {
  router.navigate('/error', { history: false });
});

Комбинирование с middleware

Navigo поддерживает middleware через метод use или функцию в on. Редиректы при ошибках можно сочетать с проверкой прав доступа:

router.on('/admin', () => {
  console.log('Панель администратора');
}).use((done, params) => {
  const isAdmin = false; // проверка прав
  if (!isAdmin) {
    router.navigate('/error');
  } else {
    done();
  }
});

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

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