Мультиязычные маршруты

Universal Router — это гибкая библиотека маршрутизации для JavaScript, которая позволяет строить сложные маршруты с динамическими параметрами, вложенными маршрутами и условными обработчиками. Организация мультиязычных маршрутов требует внимательного подхода к структуре URL, обработке параметров и локализации контента.

Мультиязычные маршруты обычно представляют собой путь с префиксом языка: /en/about, /ru/about, /fr/about. Префикс языка может быть обязательным или опциональным, что зависит от архитектуры приложения.

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

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

import UniversalRouter from 'universal-router';

const routes = [
  {
    path: '/:lang(en|ru|fr)?',
    children: [
      {
        path: '',
        action: ({ params }) => `Главная страница (${params.lang || 'ru'})`,
      },
      {
        path: 'about',
        action: ({ params }) => `Страница "О нас" (${params.lang || 'ru'})`,
      },
      {
        path: 'contact',
        action: ({ params }) => `Контакты (${params.lang || 'ru'})`,
      },
    ],
  },
];

const router = new UniversalRouter(routes);

router.resolve('/en/about').then(console.log); // Страница "О нас" (en)
router.resolve('/contact').then(console.log);  // Контакты (ru)

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

  • Параметр :lang обозначает язык и может быть опциональным.
  • Дочерние маршруты наследуют параметр языка автоматически.
  • params.lang || 'ru' позволяет установить язык по умолчанию, если он не указан в URL.

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

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

const languages = ['en', 'ru', 'fr'];
const pages = ['about', 'contact', 'services'];

const routes = languages.flatMap(lang => 
  pages.map(page => ({
    path: `/${lang}/${page}`,
    action: () => `${page} (${lang})`
  }))
);

const router = new UniversalRouter(routes);

Преимущества подхода:

  • Упрощение поддержки новых языков.
  • Четкая структура URL без вложенных условий.
  • Возможность централизованного управления контентом для разных локалей.

Использование middleware для обработки языка

Universal Router поддерживает middleware через before и after функции, что удобно для глобальной установки языка приложения:

const router = new UniversalRouter(routes, {
  context: { currentLang: 'ru' },
  resolveRoute(context, params) {
    if (params.lang) {
      context.currentLang = params.lang;
    }
    return context;
  }
});

router.resolve('/fr/about').then(result => {
  console.log(router.context.currentLang); // fr
});

Особенности:

  • Контекст (context) позволяет хранить состояние выбранного языка.
  • Middleware упрощает интеграцию с системой i18n.

Обработка fallback-языка и перенаправлений

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

{
  path: '/',
  action: () => ({ redirect: '/ru' }),
},
{
  path: '/:lang(en|ru|fr)',
  children: [...routesForLang]
}

Преимущества:

  • Единая точка входа для всех пользователей.
  • Избежание дублирования контента.
  • Поддержка SEO-дружественных URL.

Вложенные мультиязычные маршруты

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

{
  path: '/:lang(en|ru)',
  children: [
    {
      path: 'blog',
      children: [
        { path: '', action: () => 'Список постов' },
        { path: ':id', action: ({ params }) => `Пост ${params.id}` },
      ],
    },
  ],
}

Преимущества вложенности:

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

Рекомендации по интеграции с i18n

  • Динамически определять язык из URL и передавать его в библиотеку i18n.
  • Хранить контент в структуре translations[lang][key] для быстрого доступа.
  • Генерировать маршруты автоматически при добавлении новых языков.
  • Обеспечивать fallback-язык для несуществующих URL.

Оптимизация и поддержка SEO

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

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

Оглавление