Создание первого роута

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

Импорт и инициализация

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

import UniversalRouter from 'universal-router';

const routes = [];
const router = new UniversalRouter(routes);
  • routes — массив объектов, каждый из которых описывает путь и логику обработки.
  • router — экземпляр маршрутизатора, через который происходит разрешение маршрутов.

Создание простого роута

Каждый маршрут представляет собой объект с обязательным полем path и функцией action. Функция action вызывается, когда путь маршрута совпадает с текущим URL.

const routes = [
  {
    path: '/home',
    action: () => 'Главная страница'
  }
];

const router = new UniversalRouter(routes);

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

Ключевые моменты:

  • path поддерживает как статические строки ('/home'), так и динамические сегменты ('/user/:id').
  • action может возвращать строку, объект, Promise или выполнять асинхронные операции.

Динамические сегменты маршрута

Для создания маршрутов с параметрами используют двоеточие перед именем переменной:

const routes = [
  {
    path: '/user/:id',
    action: ({ params }) => `Пользователь с ID: ${params.id}`
  }
];

const router = new UniversalRouter(routes);

router.resolve('/user/42').then(result => {
  console.log(result); // 'Пользователь с ID: 42'
});
  • Параметры доступны через объект params, передаваемый в функцию action.
  • Можно задавать несколько динамических сегментов, например: /post/:postId/comment/:commentId.

Вложенные маршруты

Universal Router поддерживает вложенность маршрутов, что позволяет организовать сложные структуры приложения:

const routes = [
  {
    path: '/dashboard',
    action: () => 'Панель управления',
    children: [
      {
        path: '/stats',
        action: () => 'Статистика'
      },
      {
        path: '/settings',
        action: () => 'Настройки'
      }
    ]
  }
];

const router = new UniversalRouter(routes);

router.resolve('/dashboard/stats').then(result => console.log(result)); // 'Статистика'

Особенности вложенности:

  • Если родительский маршрут имеет action, она может быть вызвана до или после дочерней в зависимости от логики маршрутизатора.
  • Дочерние маршруты определяются через поле children и могут иметь собственные динамические сегменты.

Обработка несуществующих маршрутов

Для перехвата запросов к несуществующим путям используют специальный маршрут с path: '(.*)':

const routes = [
  {
    path: '/home',
    action: () => 'Главная'
  },
  {
    path: '(.*)',
    action: () => 'Страница не найдена'
  }
];

const router = new UniversalRouter(routes);

router.resolve('/unknown').then(result => console.log(result)); // 'Страница не найдена'
  • Паттерн (.*) захватывает любой путь, который не был сопоставлен с другими маршрутами.
  • Такой подход заменяет стандартный обработчик 404.

Асинхронные маршруты

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

const routes = [
  {
    path: '/profile/:id',
    async action({ params }) {
      const user = await fetch(`https://api.example.com/users/${params.id}`).then(res => res.json());
      return `Профиль пользователя: ${user.name}`;
    }
  }
];

const router = new UniversalRouter(routes);

router.resolve('/profile/7').then(result => console.log(result));
  • resolve всегда возвращает Promise, что делает маршруты универсальными для синхронных и асинхронных операций.
  • Асинхронные маршруты позволяют интегрировать Universal Router с любым API и системой рендеринга.

Резюме структуры роута

Каждый маршрут включает в себя несколько ключевых элементов:

  1. path — путь маршрута, поддерживающий динамические сегменты.
  2. action — функция обработки маршрута, может быть асинхронной.
  3. children — массив вложенных маршрутов для организации иерархии.
  4. params — объект с параметрами пути, передаваемый в action.

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

Оглавление