Обработчик 404

В библиотеке Navigo обработка несуществующих маршрутов реализуется с помощью функции, которая перехватывает любые запросы, не сопоставленные с зарегистрированными маршрутами. Это позволяет управлять поведением приложения при ошибках навигации и отображать кастомизированные страницы «Не найдено» или выполнять перенаправления на другие маршруты.

Регистрация обработчика 404

Для регистрации обработчика 404 используется метод .notFound(handler). Этот метод принимает один параметр — функцию-обработчик, которая вызывается, если текущий URL не совпадает ни с одним зарегистрированным маршрутом.

Пример базовой регистрации:

import Navigo from 'navigo';

const router = new Navigo('/');

router
  .on('/', () => {
    console.log('Главная страница');
  })
  .on('/about', () => {
    console.log('Страница "О нас"');
  })
  .notFound(() => {
    console.log('Страница не найдена');
  });

router.resolve();

В данном примере, если пользователь перейдёт по URL /contact, который не зарегистрирован, вызовется функция внутри .notFound(), и в консоль будет выведено сообщение «Страница не найдена».

Передача параметров и контекста

Функция-обработчик 404 получает объект params и объект query, аналогично обычным маршрутам. Это позволяет анализировать URL и, при необходимости, делать динамический рендеринг страницы или логирование:

router.notFound(({ params, query }) => {
  console.log('Несуществующий маршрут:', params);
  console.log('Параметры запроса:', query);
});

Таким образом, можно извлекать информацию о попытках обращения к несуществующим страницам и строить на основе этого поведение приложения.

Динамическая генерация страницы 404

Обработчик 404 можно использовать для динамической генерации контента. Например, выводить кастомизированное сообщение с ссылкой на главную страницу:

router.notFound(() => {
  document.body.innerHTML = `
    <h1>404 — Страница не найдена</h1>
    <p>Перейти на <a href="/">главную страницу</a>.</p>
  `;
});

Такой подход позволяет полностью контролировать отображение и оформление страницы ошибки в рамках SPA (Single Page Application), не требуя перезагрузки страницы.

Перенаправление на существующие маршруты

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

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

В этом случае любой несуществующий маршрут будет автоматически перенаправлен на главную страницу приложения.

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

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

router
  .on('/user/:id', ({ data }) => {
    console.log('Пользователь с id:', data.id);
  })
  .notFound(() => {
    console.log('Маршрут не существует');
  });

Например, переход на /user/123 вызовет первый маршрут, а /user/abc/extra сработает обработчик 404.

Совмещение с другими методами Navigo

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

router
  .on('/home', () => console.log('Home'))
  .on('/profile/:id', ({ data }) => console.log('Profile', data.id))
  .notFound(() => console.log('Страница не найдена'));

router.resolve();

Если после этого изменить URL вручную на /settings, Navigo вызовет .notFound().

Логирование и аналитика 404

Обработчик 404 удобно использовать для сбора статистики о попытках перехода на несуществующие страницы. Можно интегрировать отправку данных на сервер или аналитические платформы:

router.notFound(({ location }) => {
  fetch('/api/log-404', {
    method: 'POST',
    body: JSON.stringify({ path: location }),
    headers: { 'Content-Type': 'application/json' }
  });
});

Здесь location — объект текущего URL, предоставляемый Navigo, который содержит pathname и query параметры.

Итоговые рекомендации по использованию

  • Размещать .notFound() после всех основных маршрутов.
  • Использовать для отображения кастомной страницы ошибки или перенаправления.
  • Передавать в обработчик параметры и контекст для динамической генерации страниц или аналитики.
  • В SPA избегать перезагрузки страницы, управляя содержимым DOM через обработчик 404.
  • Интегрировать логирование и сбор статистики для улучшения пользовательского опыта.
Оглавление