Hooks already

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

Хуки реализуются через объект hooks, передаваемый при инициализации экземпляра Navigo или при регистрации конкретного маршрута. Стандартные хуки включают:

before – вызывается перед переходом на маршрут.
after – вызывается после успешного перехода.
already – вызывается, если переход на маршрут осуществляется повторно на уже активный маршрут.
leave – вызывается при уходе с маршрута.
error – вызывается при ошибках маршрутизации.

Хук `already`

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

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

import Navigo from 'navigo';

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

router.hooks({
  already: (params, route) => {
    console.log('Повторный переход на маршрут:', route.name);
    // Выполняем обновление данных
    if (route.name === 'dashboard') {
      refreshDashboardData();
    }
  }
});

В этом примере функция refreshDashboardData вызывается только тогда, когда пользователь кликает на ссылку маршрута dashboard, который уже активен.

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

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

router.on('/profile', {
  uses: profileHandler,
  hooks: {
    already: () => {
      console.log('Маршрут profile уже активен, обновляем профиль');
      updateProfileInfo();
    }
  }
});

Параметры хуков

Хук already получает два параметра:

params – объект с параметрами маршрута. Например, если маршрут /user/:id, то при переходе на /user/42 params будет { id: '42' }.
route – объект маршрута с основными свойствами:
- name – имя маршрута, если оно задано.
- url – полный URL маршрута.
- hooks – объект хуков маршрута.

Использование этих параметров позволяет адаптировать поведение в зависимости от текущего маршрута и переданных данных.

Практические сценарии использования

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

Комбинирование с другими хуками

Хук already отлично сочетается с другими хуками:

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

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

router.on('/settings', settingsHandler)
  .hooks({
    before: (done, params) => {
      checkPermissions(params.userId) ? done() : done(false);
    },
    already: () => {
      console.log('Настройки уже открыты, обновляем данные');
      reloadSettings();
    },
    after: () => {
      console.log('Маршрут settings завершен');
    }
  });