Отладка хуков

В библиотеке Navigo хуки представляют собой функции обратного вызова, которые вызываются в определённые моменты жизненного цикла маршрута. Основные типы хуков: before, after, already, error. Они позволяют контролировать переходы, выполнять асинхронные операции и управлять состоянием приложения при навигации.

Хук before

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

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

const router = new Navigo('/');

router.on('/profile/:id', (params) => {
    console.log('Маршрут загружен', params.id);
}).before((done, params) => {
    if (params.id === '0') {
        console.log('Неверный ID, переход отменён');
        done(false); // отменяем переход
    } else {
        done(); // разрешаем переход
    }
});

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

  • done(false) — отменяет переход.
  • done() без аргументов — разрешает переход.
  • done(newPath) — перенаправляет на другой путь.

Хук after

Хук after вызывается после завершения перехода, когда контент маршрута уже обработан. Он полезен для логирования, аналитики или обновления состояния интерфейса.

router.on('/dashboard', () => {
    console.log('Загрузка дашборда завершена');
}).after((params) => {
    console.log('Навигация прошла успешно', params);
});

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

  • Аргумент params содержит текущие параметры маршрута.
  • Можно использовать для добавления динамических эффектов после навигации.

Хук already

Хук already срабатывает, если переход совпадает с текущим маршрутом. Это особенно важно при обновлении данных на одном и том же URL без перезагрузки страницы.

router.on('/messages', () => {
    console.log('Показ сообщений');
}).already((params) => {
    console.log('Маршрут уже активен', params);
});

Применение:

  • Перезагрузка данных без повторной инициализации компонентов.
  • Избегание лишних операций при повторных переходах.

Хук error

Хук error активируется при исключениях внутри маршрута или хуков before и after. Он позволяет централизованно обрабатывать ошибки навигации.

router.on('/settings', () => {
    throw new Error('Ошибка при загрузке настроек');
}).error((err, params) => {
    console.error('Ошибка маршрутизации:', err, params);
});

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

  • Первый аргумент — объект ошибки.
  • Второй аргумент — параметры маршрута.
  • Можно использовать для отображения уведомлений или перенаправления на страницу ошибки.

Отладка хуков

Для эффективной отладки рекомендуется:

  1. Логирование вызовов: включение console.log в каждом хукe помогает понять порядок выполнения.
  2. Асинхронные операции в before: функция done может вызываться после завершения промисов.
router.on('/data', () => {
    console.log('Маршрут загружен');
}).before(async (done) => {
    try {
        const response = await fetch('/api/check');
        const data = await response.json();
        if (data.allow) done();
        else done('/login'); // перенаправление
    } catch (e) {
        done(false);
    }
});
  1. Проверка повторного перехода: хук already помогает отслеживать многократные клики на одной и той же ссылке.
  2. Обработка ошибок глобально: использование error упрощает централизованное логирование и предотвращает падение приложения.

Рекомендации по отладке

  • Использовать console.group и console.groupEnd для структурирования логов переходов.
  • Отдельно тестировать каждый хук на простых маршрутах перед объединением в сложную структуру.
  • При асинхронных проверках в before проверять все ветки вызова done, чтобы избежать «заморозки» маршрутизации.

Советы по организации кода

  • Разделять хуки по функциональности: авторизация, логирование, аналитика.
  • Для больших приложений можно хранить хуки в отдельном модуле и подключать их к маршрутам.
  • Избегать сложных синхронных операций в before, чтобы не блокировать интерфейс.

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

Оглавление