Клавиатурная навигация

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

Для начала необходимо создать экземпляр маршрутизатора:

import Navigo from 'navigo';

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

Здесь первый аргумент '/' задаёт базовый путь, а опция hash: false позволяет использовать стандартные URL без хэшей (#). Если приложение должно работать через хэш, эту опцию можно установить в true.

Определение маршрутов

Маршруты задаются через метод on, который принимает путь и функцию-обработчик:

router.on('/home', () => {
    console.log('Отображается домашняя страница');
});

router.on('/about', () => {
    console.log('Отображается страница "О нас"');
});

Можно использовать параметры в маршрутах:

router.on('/user/:id', (params) => {
    console.log(`Пользователь с ID: ${params.id}`);
});

Navigo автоматически извлекает параметры из URL и передает их в функцию-обработчик. Для опциональных параметров используется синтаксис :param?:

router.on('/search/:query?', (params) => {
    console.log(`Результаты поиска для: ${params.query || 'всё'}`);
});

Навигация по клавишам

Для реализации клавиатурной навигации важно уметь отслеживать события клавиатуры и запускать маршруты через API Navigo. Основной метод — router.navigate(path):

document.addEventListener('keydown', (event) => {
    switch(event.key) {
        case 'ArrowLeft':
            router.navigate('/previous');
            break;
        case 'ArrowRight':
            router.navigate('/next');
            break;
        case 'Home':
            router.navigate('/home');
            break;
    }
});

Здесь keydown позволяет реагировать на нажатие клавиш до того, как браузер выполнит стандартное действие. Метод navigate обновляет URL и вызывает соответствующий обработчик маршрута, сохраняя SPA-поведение.

Динамическая маршрутизация с параметрами

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

let currentItem = 0;
const items = ['item1', 'item2', 'item3'];

document.addEventListener('keydown', (event) => {
    if(event.key === 'ArrowRight') {
        currentItem = (currentItem + 1) % items.length;
        router.navigate(`/items/${currentItem}`);
    } else if(event.key === 'ArrowLeft') {
        currentItem = (currentItem - 1 + items.length) % items.length;
        router.navigate(`/items/${currentItem}`);
    }
});

router.on('/items/:index', (params) => {
    console.log(`Отображается элемент: ${items[params.index]}`);
});

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

Обработка глобальных клавиш

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

const keyMap = {
    'h': '/home',
    'a': '/about',
    'u': '/user/1'
};

document.addEventListener('keydown', (event) => {
    const path = keyMap[event.key];
    if(path) {
        router.navigate(path);
    }
});

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

События изменения маршрутов

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

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

router.on('*', () => {
    console.log('Маршрут не найден');
});

router.resolve();

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

Работа с history API

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

Для реализации кнопки «Назад» клавиатурно достаточно реагировать на событие popstate:

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

Это гарантирует, что при навигации назад или вперёд через клавиатуру приложение корректно отобразит состояние.

Интеграция с фреймворками

Navigo легко интегрируется с React, Vue или Vanilla JS. В случае клавиатурной навигации важно, чтобы обработчики клавиш были глобальными и не конфликтовали с элементами формы. Рекомендуется использовать делегирование событий на уровне document или корневого контейнера приложения.

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

Оглавление