Именованные роуты

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

Создание именованного роута осуществляется через передачу объекта с параметрами name и handler при определении маршрута:

const router = new Navigo('/');

router.on({
  name: 'home',
  path: '/',
  handler: () => {
    console.log('Главная страница');
  }
});

router.on({
  name: 'profile',
  path: '/user/:id',
  handler: ({ data }) => {
    console.log(`Профиль пользователя с ID: ${data.id}`);
  }
});

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

Генерация URL через именованные роуты

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

const profileUrl = router.generate('profile', { id: 42 });
console.log(profileUrl); // /user/42
  • Первый аргумент — имя маршрута, заданное в name.
  • Второй аргумент — объект с параметрами маршрута (:id в примере).

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

Навигация по именованным роутам

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

router.navigate('home');
router.navigate('profile', { id: 7 });

Это заменяет необходимость прямого указания строкового пути:

// Вместо router.navigate('/user/7');

Таким образом, изменения структуры URL в будущем не требуют исправления всех вызовов navigate, достаточно обновить путь в определении роута.

Именованные роуты с динамическими сегментами

Маршруты могут содержать динамические сегменты, которые затем передаются через объект параметров:

router.on({
  name: 'article',
  path: '/articles/:category/:id',
  handler: ({ data }) => {
    console.log(`Категория: ${data.category}, Статья: ${data.id}`);
  }
});

const articleUrl = router.generate('article', { category: 'tech', id: 101 });
console.log(articleUrl); // /articles/tech/101

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

Переопределение и использование именованных роутов

Если требуется изменить путь существующего именованного роута, достаточно вызвать on с тем же именем, указав новый путь:

router.on({
  name: 'profile',
  path: '/member/:id',
  handler: ({ data }) => {
    console.log(`Профиль члена с ID: ${data.id}`);
  }
});

console.log(router.generate('profile', { id: 42 })); // /member/42

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

function redirectToProfile(userId) {
  const url = router.generate('profile', { id: userId });
  router.navigate(url);
}

Совмещение именованных роутов с fallback и hooks

Navigo поддерживает хуки и fallback маршруты, которые можно сочетать с именованными роутами для более сложной логики:

router.on({
  name: 'dashboard',
  path: '/dashboard',
  handler: () => console.log('Дашборд'),
  before: (done, params) => {
    if (!user.isLoggedIn) {
      router.navigate('login');
    } else {
      done();
    }
  }
});

router.notFound(() => {
  router.navigate('home');
});

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

Преимущества использования именованных роутов

  1. Удобство поддержки: все ссылки и переходы завязаны на имя, а не на строку URL.
  2. Гибкость: динамические параметры легко интегрируются и управляются.
  3. Консистентность: изменение структуры URL не требует массовых правок кода.
  4. Совместимость с SPA: удобно для динамических интерфейсов и вложенных маршрутов.

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

Оглавление