Относительные переходы

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

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

Конструктор Navigo и базовый маршрут

Для работы с Navigo создаётся экземпляр класса:

import Navigo from 'navigo';

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

Здесь первый параметр '/' задаёт базовый путь, относительно которого будут строиться маршруты. Опция hash: true позволяет использовать хеш-навигацию, что удобно для старых браузеров и при статическом хостинге.

Регистрация маршрутов

Для простого маршрута используется метод on:

router.on('/users', () => {
    console.log('Список пользователей');
});

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

Сегменты :id являются динамическими, и их значение можно получить через объект params.

Относительные переходы через navigate

Метод navigate позволяет инициировать переход по маршруту. Чтобы использовать относительные пути, достаточно передать путь без ведущего слэша:

// Текущий маршрут: /users
router.navigate('edit');  // Результат: /users/edit
router.navigate('../');   // Результат: / (подняться на один уровень)
router.navigate('../. ./'); // Результат: / (если выше уровня нет)

Важно: Навигация относительно текущего маршрута зависит от структуры URL и используемых сегментов. Относительный путь '../' всегда указывает на родительский уровень, а './' или отсутствие префикса — на текущий уровень.

Вложенные маршруты и относительные переходы

Вложенные маршруты строятся через цепочку on или при помощи подмаршрутов:

router
  .on('/dashboard', () => {
      console.log('Главная панель');
  })
  .on('/dashboard/settings', () => {
      console.log('Настройки панели');
  });

Переход внутри /dashboard может быть выполнен как относительный:

router.navigate('settings');   // /dashboard/settings
router.navigate('../');         // / (возврат на уровень выше)

Для более сложной вложенной структуры полезно использовать относительные переходы с несколькими уровнями:

// Текущий маршрут: /dashboard/settings/profile
router.navigate('../. ./analytics'); // Переход на /dashboard/analytics

Динамические сегменты и относительная навигация

Динамические сегменты URL могут использоваться совместно с относительными переходами. Например:

router.on('/projects/:projectId/tasks/:taskId', (params) => {
    console.log('Текущая задача:', params.taskId);
});

// Переход на следующий таск
router.navigate('../next'); // Переход на /projects/:projectId/tasks/next

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

Относительная навигация с query-параметрами

Navigo поддерживает передачу query-параметров при навигации:

router.navigate('settings?tab=security');

Если использовать относительный путь:

router.navigate('../settings?tab=security');

Путь будет рассчитан относительно текущего маршрута, а параметры добавлены к URL автоматически.

Рекомендации по использованию

  1. Относительные пути упрощают поддержку: изменения базового маршрута не требуют корректировки всех ссылок.
  2. Использовать ../ осторожно: важно отслеживать текущий уровень вложенности, чтобы избежать переходов за пределы корня.
  3. Совмещать с динамическими сегментами: относительные переходы особенно удобны в SPA с параметризованными URL.
  4. Проверять корректность через router.resolve(): позволяет отлаживать построение URL перед реальной навигацией.

Практический пример

router.on('/blog', () => {
    console.log('Список постов');
});

router.on('/blog/:id', (params) => {
    console.log('Просмотр поста', params.id);
});

// Текущий URL: /blog/42
router.navigate('../');      // Переход на /blog
router.navigate('./edit');   // Переход на /blog/42/edit
router.navigate('../. ./');   // Переход на /

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

Оглавление