Несуществующие маршруты

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

Регистрация маршрута по умолчанию

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

Пример базового использования:

import Navigo from 'navigo';

const router = new Navigo('/');

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

router.resolve();

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

  • notFound() должен быть вызван после регистрации всех существующих маршрутов.
  • Функция, переданная в notFound(), не принимает аргументов, но внутри неё можно получать текущий URL через router.lastRouteResolved() или window.location.pathname.
  • Эта обработка актуальна только для клиентской маршрутизации; серверные 404 остаются отдельным вопросом.

Динамическая реакция на несущестующие маршруты

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

router.notFound((query) => {
  const currentPath = window.location.pathname;
  document.body.innerHTML = `<h1>404</h1><p>Страница "${currentPath}" не найдена.</p>`;
});

Особенность в том, что window.location.pathname отражает путь после домена и соответствует тому, что видит пользователь в адресной строке. Это позволяет выводить подробные сообщения об ошибке, включая конкретный путь, который не найден.

Перенаправление на существующую страницу

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

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

Здесь метод navigate() инициирует повторное разрешение маршрутов, и пользователь оказывается на корректной странице без необходимости ручного ввода URL. Такой подход особенно полезен в приложениях с частыми изменениями структуры маршрутов.

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

Даже если приложение использует динамические маршруты с параметрами (:id, :slug), notFound() будет срабатывать для полностью несуществующих путей. Например:

router
  .on('/posts/:id', (params) => {
    console.log(`Пост с id=${params.id}`);
  })
  .notFound(() => {
    document.body.innerHTML = '<h1>404</h1><p>Такой пост не найден.</p>';
  });

Если пользователь введет /posts/123, маршрут будет обработан корректно. Если же путь /posts/abc/extra не соответствует ни одному шаблону, вызовется notFound().

Важно: Навигация с неправильными параметрами (например, ID, которого нет в базе) не считается несущестующим маршрутом с точки зрения Navigo. Для такой проверки нужно реализовать дополнительную валидацию внутри обработчика маршрута.

Комплексные стратегии обработки 404

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

  1. Вывод страницы ошибки: отображение кастомного компонента 404 с навигацией назад.
  2. Логирование: отправка информации о несущестующем маршруте на сервер для анализа 404 ошибок.
  3. Автоперенаправление: выбор оптимального маршрута на основе аналитики или контекста пользователя.
  4. Совместимость с динамическими маршрутами: проверка параметров внутри существующих маршрутов и вызов notFound() при некорректных данных.

Пример:

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

Взаимодействие с History API и fallback

Navigo использует History API для маршрутизации без перезагрузки страницы. Для корректной работы notFound() следует учитывать, что при прямом переходе по несуществующему URL через адресную строку сервер должен отдавать главный HTML файл приложения, иначе браузер покажет стандартную серверную 404 ошибку.

Таким образом, обработка несущестующих маршрутов в Navigo тесно связана с настройкой сервера и поддержкой SPA. Это позволяет:

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

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

Оглавление