Fallback-маршруты

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

Создание fallback-маршрута осуществляется с помощью метода notFound экземпляра Navigo:

const router = new Navigo('/', { hash: true });

router.notFound(() => {
    document.body.innerHTML = '<h1>Страница не найдена</h1>';
});

В этом примере любой URL, который не зарегистрирован через on, будет обрабатываться функцией, переданной в notFound.

Отличие fallback от обычных маршрутов

Обычные маршруты в Navigo настраиваются через метод on и сопоставляются с конкретными путями:

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

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

Использование параметров в fallback-маршрутах

В отличие от обычных маршрутов, fallback-маршрут не принимает параметры напрямую, поскольку он вызывается только тогда, когда никакой другой маршрут не подходит. Однако, внутри функции можно получить текущий путь и использовать его для логирования или динамической обработки:

router.notFound(({ url }) => {
    console.warn(`Попытка открыть неизвестный путь: ${url}`);
    document.body.innerHTML = `<h1>404: ${url} не существует</h1>`;
});

Здесь объект с полем url передаётся в callback, что позволяет строить более информативные сообщения для пользователей.

Фallback-маршруты и редиректы

Fallback-маршрут можно использовать для перенаправления на другой маршрут. Это особенно удобно для SPA, где нужно автоматически возвращать пользователя на главную страницу или на страницу входа при ошибке:

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

Метод navigate позволяет задать путь, на который будет произведено перенаправление. При этом старый путь остаётся в истории браузера, что может быть удобно для аналитики и логирования.

Обработка сложных условий

В некоторых случаях требуется более гибкая логика fallback-маршрута. Например, различать ошибки в зависимости от протокола или поддомена:

router.notFound(({ url }) => {
    if (url.startsWith('/admin')) {
        router.navigate('/admin/login');
    } else {
        document.body.innerHTML = '<h1>Страница не найдена</h1>';
    }
});

Такой подход позволяет объединять маршрутизацию с бизнес-логикой приложения без дублирования кода в каждом маршруте.

Регистрация fallback-маршрута после основных маршрутов

Важно регистрировать fallback-маршрут после всех основных маршрутов, чтобы он не перекрывал их. Navigo проверяет маршруты в том порядке, в котором они были добавлены. Если notFound вызвать до on, все запросы будут сразу попадать в fallback.

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

router.notFound(() => {
    document.body.innerHTML = '<h1>404: Страница не найдена</h1>';
});

Fallback и хэш-навигация

При использовании опции hash: true в Navigo, fallback-маршрут срабатывает для всех несуществующих хэш-путей:

const router = new Navigo('/', { hash: true });

router.on('/profile', () => {
    console.log('Профиль пользователя');
});

router.notFound(({ url }) => {
    document.body.innerHTML = `<h1>404: ${url}</h1>`;
});

Если пользователь введёт #settings, а маршрута /settings нет, callback fallback-маршрута будет вызван с url = '/settings'.

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

  • Всегда регистрировать fallback после основных маршрутов, чтобы избежать непредвиденного поведения.
  • Использовать логирование в callback, чтобы отслеживать ошибки навигации и несуществующие URL.
  • Комбинировать с редиректами, чтобы направлять пользователей на корректные страницы без необходимости покидать SPA.
  • Обрабатывать динамические пути, получая текущий URL через объект параметров, передаваемый в notFound.

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

Оглавление