Состояние навигации

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

Основные концепции состояния навигации

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

  1. Текущий маршрут Navigo хранит информацию о текущем маршруте в объекте, который создаётся при каждом срабатывании router.resolve(). Этот объект содержит:

    • url — текущий путь;
    • params — параметры, извлечённые из URL;
    • query — объект с query-параметрами (если используется withQueryParams()).

  2. Параметры маршрута При определении маршрутов можно задавать динамические сегменты через двоеточие:

    router.on('/user/:id', (params) => {
    console.log(params.id); // id пользователя из URL
});

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

  3. Query-параметры Navigo позволяет легко получать query-параметры через метод withQueryParams():

    router.on('/search', (params, query) => {
    console.log(query.q); // значение параметра ?q=...
}).withQueryParams();

    При этом объект query включается в состояние навигации, что облегчает управление состоянием приложения.

Методы управления состоянием

Метод navigate() позволяет программно изменить текущий маршрут, создавая новое состояние в истории браузера.

router.navigate('/dashboard', { updateBrowserURL: true });

Параметры опций:

  • updateBrowserURL (boolean) — обновлять URL в адресной строке или нет;
  • callHandler (boolean) — вызывать ли обработчик маршрута при навигации.

resolve()

Метод resolve() используется для обработки текущего URL и сопоставления его с зарегистрированными маршрутами. Это ключевой метод для синхронизации состояния навигации при загрузке страницы:

router.resolve();

Если страница загружена с URL /user/42, resolve() вызовет соответствующий обработчик маршрута и передаст параметры.

Хранение состояния между маршрутами

Navigo не предоставляет встроенной системы глобального состояния, но состояние навигации можно сохранять в объекте приложения или использовать сторонние хранилища (например, Redux или простые JS-объекты). Пример:

let appState = {};

router.on('/profile/:id', (params) => {
    appState.currentUserId = params.id;
    renderProfile(appState.currentUserId);
});

С помощью такого подхода сохраняется актуальная информация о навигации, доступная для других частей приложения.

События навигации

Navigo поддерживает события, которые помогают отслеживать изменения состояния:

  • on — основной метод регистрации обработчика маршрута.
  • hooks — возможность добавления before и after хуков:
router.hooks({
    before: (done, params) => {
        console.log('Перед переходом', params);
        done();
    },
    after: (params) => {
        console.log('После перехода', params);
    }
});

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

Работа с историей и состоянием браузера

Navigo использует History API, что обеспечивает полное управление состоянием навигации:

  • pushState — добавляет новый маршрут в историю;
  • replaceState — заменяет текущее состояние;
  • popstate — событие, срабатывающее при возврате к предыдущему маршруту.

Пример навигации с заменой состояния:

router.navigate('/settings', { updateBrowserURL: true, callHandler: true });

Для отслеживания возвращения назад можно использовать обработку popstate совместно с resolve():

window.addEventListener('popstate', () => {
    router.resolve();
});

Состояние маршрута и условная навигация

Иногда требуется проверять текущее состояние маршрута перед переходом. Для этого можно использовать метод match():

if (!router.match('/admin')) {
    router.navigate('/login');
}

match() возвращает объект с информацией о маршруте, если URL соответствует зарегистрированному маршруту, или null, если нет совпадений.

Динамическое обновление состояния

Navigo поддерживает обновление маршрутов и состояния на лету. Можно добавлять новые маршруты после инициализации и обновлять обработчики:

router.on('/dashboard/:tab', (params) => {
    console.log('Текущая вкладка:', params.tab);
});

router.resolve();

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

Резюме ключевых аспектов состояния навигации

  • Текущий маршрут: объект с URL и параметрами, формируемый при каждом resolve().
  • Динамические параметры: извлекаются из URL и query-параметров.
  • Программная навигация: navigate() и resolve() управляют состоянием без перезагрузки.
  • Хуки: before и after позволяют контролировать состояние до и после изменения маршрута.
  • История браузера: интеграция с History API для push/replace state и отслеживания popstate.
  • Динамическое управление маршрутами: добавление новых маршрутов и обновление обработчиков на лету.

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

Оглавление