Hooks after

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

Основное назначение after

Хук after вызывается после того, как был выполнен обработчик маршрута (callback функции, переданные в методах on или resolve). Он получает информацию о текущем маршруте и позволяет:

  • Обновлять пользовательский интерфейс.
  • Производить аналитические действия (например, отправку данных в системы аналитики).
  • Выполнять глобальные проверки состояния приложения.
  • Настраивать поведение навигации после изменения URL.

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

Подключение after

after задается с помощью метода hooks объекта Navigo:

import Navigo from 'navigo';

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

router.hooks({
  after: (params, route) => {
    console.log('Маршрут обработан:', route.name);
    console.log('Параметры маршрута:', params);
  }
});
  • params – объект с параметрами текущего маршрута.
  • route – объект с информацией о маршруте, включая name, url и другие свойства.

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

Использование параметров

Параметры, передаваемые в after, позволяют динамически реагировать на смену маршрута:

router.on('/user/:id', (params) => {
  console.log('Переход к пользователю:', params.id);
}).hooks({
  after: (params, route) => {
    if (route.url.startsWith('/user')) {
      document.title = `Профиль пользователя ${params.id}`;
    }
  }
});

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

Особенности работы

  • Глобальный вызов: хук after можно задать один раз для всего роутера. Он будет выполняться после всех маршрутов.
  • Асинхронные обработчики: если обработчик маршрута возвращает Promise, хук after срабатывает только после завершения промиса, что позволяет безопасно работать с асинхронными данными.
router.on('/posts', async () => {
  const posts = await fetchPosts();
  renderPosts(posts);
}).hooks({
  after: (params, route) => {
    console.log('Данные успешно загружены для маршрута', route.url);
  }
});
  • Контекст this: внутри after контекст this не связан с компонентами, а относится к внутреннему объекту роутера.

Отличие от before

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

router.hooks({
  before: (done, params, route) => {
    if (!isAuthenticated()) {
      return router.navigate('/login');
    }
    done();
  },
  after: (params, route) => {
    console.log('Пользователь авторизован, маршрут завершён:', route.url);
  }
});

Примеры практического применения

  1. Аналитика посещений:
router.hooks({
  after: (params, route) => {
    sendAnalytics(route.url, route.name);
  }
});
  1. Обновление интерфейса:
router.hooks({
  after: (params, route) => {
    document.querySelectorAll('.active').forEach(el => el.classList.remove('active'));
    document.querySelector(`[data-route="${route.name}"]`)?.classList.add('active');
  }
});
  1. Очистка состояния компонентов:
router.hooks({
  after: () => {
    resetTemporaryFormData();
    stopLoadingIndicators();
  }
});

Поддержка нескольких хуков

Если требуется несколько действий после маршрута, их можно объединять в одном хуке after или использовать вспомогательные функции для структурирования кода:

const updateUI = (params, route) => { /* ... */ };
const trackRoute = (params, route) => { /* ... */ };

router.hooks({
  after: (params, route) => {
    updateUI(params, route);
    trackRoute(params, route);
  }
});

Заключение по функциональности

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

Оглавление