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

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

Основы модульной структуры маршрутов

В Universal Router маршруты задаются в виде массива объектов, где каждый объект описывает путь, обработчик и вложенные маршруты. Простейшая структура маршрутов выглядит так:

import UniversalRouter from 'universal-router';

const routes = [
  { path: '/', action: () => 'Главная' },
  { path: '/about', action: () => 'О проекте' },
  { path: '/contact', action: () => 'Контакты' }
];

const router = new UniversalRouter(routes);

Когда приложение растёт, этот массив может содержать десятки или сотни маршрутов. Разделение маршрутов на модули позволяет держать каждый блок логически обособленным.

Создание отдельных модулей маршрутов

Для каждого функционального блока создаётся свой файл с маршрутизатором. Например, модуль пользователей:

usersRoutes.js

export default [
  { path: '/users', action: () => 'Список пользователей' },
  { path: '/users/:id', action: ({ params }) => `Профиль пользователя ${params.id}` }
];

Модуль статических страниц:

pagesRoutes.js

export default [
  { path: '/', action: () => 'Главная' },
  { path: '/about', action: () => 'О проекте' },
  { path: '/contact', action: () => 'Контакты' }
];

Объединение модулей в один массив маршрутов

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

import UniversalRouter from 'universal-router';
import usersRoutes from './usersRoutes';
import pagesRoutes from './pagesRoutes';

const routes = [
  ...pagesRoutes,
  ...usersRoutes
];

const router = new UniversalRouter(routes);

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

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

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

adminRoutes.js

export default [
  {
    path: '/admin',
    action: () => 'Админ-панель',
    children: [
      { path: '/users', action: () => 'Управление пользователями' },
      { path: '/settings', action: () => 'Настройки системы' }
    ]
  }
];

Главный роутер подключает модуль аналогично предыдущему примеру:

import adminRoutes from './adminRoutes';

const routes = [
  ...pagesRoutes,
  ...usersRoutes,
  ...adminRoutes
];

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

Динамическая загрузка модулей маршрутов

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

const routes = [
  {
    path: '/users',
    action: async () => {
      const module = await import('./usersRoutes');
      return module.default;
    }
  }
];

Асинхронная загрузка уменьшает начальный объём кода и ускоряет стартап приложения, особенно если модуль содержит сложные компоненты или логику.

Использование фабрик маршрутов

Иногда полезно создавать маршруты с помощью фабричных функций, чтобы повторно использовать конфигурации:

function createUserRoutes(basePath = '/users') {
  return [
    { path: basePath, action: () => 'Список пользователей' },
    { path: `${basePath}/:id`, action: ({ params }) => `Профиль ${params.id}` }
  ];
}

const routes = [
  ...pagesRoutes,
  ...createUserRoutes('/admin/users')
];

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

Организация файловой структуры

Эффективная модульная структура может выглядеть так:

/src
  /routes
    index.js          // объединение всех маршрутов
    pagesRoutes.js
    usersRoutes.js
    adminRoutes.js
  /pages
    Home.js
    About.js
    Contact.js

В index.js собираются все маршруты:

import pagesRoutes from './pagesRoutes';
import usersRoutes from './usersRoutes';
import adminRoutes from './adminRoutes';

export default [
  ...pagesRoutes,
  ...usersRoutes,
  ...adminRoutes
];

Главный роутер в приложении использует единый импорт:

import UniversalRouter from 'universal-router';
import routes from './routes';

const router = new UniversalRouter(routes);

Резюме ключевых принципов модульности

  • Логическая изоляция – каждый функциональный блок имеет отдельный модуль маршрутов.
  • Объединение через спред-оператор – упрощает сборку общего массива маршрутов.
  • Вложенные маршруты – позволяют создавать иерархические структуры без дублирования кода.
  • Асинхронная загрузка – оптимизирует время загрузки крупных приложений.
  • Фабрики маршрутов – дают гибкость при создании повторяющихся структур.
  • Файловая организация – поддерживает удобство навигации и масштабируемость проекта.

Разделение маршрутов на модули является базовым инструментом при построении крупных JavaScript-приложений с Universal Router, позволяя поддерживать код чистым, масштабируемым и легко управляемым.

Оглавление