Riot Route - встроенный роутер

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

Основы работы Riot Route

Riot Route работает через отслеживание изменения хэша в URL или истории браузера. Основная концепция — связывать определённый путь с функцией или компонентом, который должен отображаться при совпадении маршрута.

Подключение и инициализация

Riot Route включён в основной пакет Riot.js и подключается через глобальный объект route:

import { route } from 'riot';

Для начала работы достаточно инициализировать маршруты и вызвать route.start(true) для запуска маршрутизации с учётом текущего URL.

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

Маршруты определяются с помощью метода route(). Синтаксис простой:

route('/path', callback)
  • /path — строка пути, может включать параметры.
  • callback — функция, вызываемая при совпадении маршрута.

Пример:

route('/home', () => {
  console.log('Главная страница');
});

route('/about', () => {
  console.log('О приложении');
});
Параметры маршрута

Riot Route поддерживает динамические сегменты в пути, которые начинаются с двоеточия ::

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

Можно использовать несколько параметров:

route('/order/:orderId/item/:itemId', (orderId, itemId) => {
  console.log(`Заказ ${orderId}, товар ${itemId}`);
});

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

route('/page/*', (path) => {
  console.log(`Любая страница: ${path}`);
});

Навигация по маршрутам

Для программной навигации используется метод route с указанием пути:

route('/home'); // переход на /home

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

route('/about', true); // true — заменить текущую запись

Поддержка «хеша» и истории

По умолчанию Riot Route работает через hash-based routing (используется # в URL). Для поддержки истории HTML5 необходимо включить соответствующую настройку:

route.start(true); // true — использовать pushState

Это позволяет получать чистые URL без символа # и улучшает SEO и читаемость ссылок.

Работа с событиями

Riot Route предоставляет события для отслеживания изменений маршрутов:

  • route.start — вызывается при запуске роутера.
  • route.changed — при изменении маршрута.
  • route.exit — перед выходом с маршрута.

Пример:

route.start(true);

route('/profile/:id', (id) => {
  console.log(`Открыт профиль: ${id}`);
});

route.changed((newRoute) => {
  console.log('Маршрут изменён:', newRoute);
});

Интеграция с компонентами Riot.js

Маршруты обычно связываются с монтированием или обновлением компонентов:

import Profile from './components/profile.riot';

route('/profile/:id', (id) => {
  const container = document.getElementById('app');
  container.innerHTML = '';
  mount(Profile, { userId: id }, container);
});

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

Группировка и вложенные маршруты

Riot Route поддерживает вложенные маршруты и может использоваться для организации сложной навигации:

route('/admin/*', (subPath) => {
  if (subPath === 'dashboard') {
    console.log('Админская панель');
  } else if (subPath.startsWith('users')) {
    console.log('Секция пользователей');
  }
});

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

route(/^\/product\/(\d+)$/, (id) => {
  console.log(`Товар с ID: ${id}`);
});

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

Маршруты можно отключать при необходимости с помощью метода route.stop() для глобальной остановки или route('*', null) для конкретного пути.

route.stop(); // останавливает обработку всех маршрутов

Лучшая практика

  • Использовать единый контейнер для монтирования компонентов, чтобы избежать утечек памяти при смене маршрута.
  • Разделять маршруты на логические группы для упрощения поддержки.
  • Использовать динамические параметры для REST-подобной навигации.
  • Следить за очисткой событий при размонтировании компонентов, чтобы не возникали неожиданные вызовы callback’ов.

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

Оглавление