Fallback для языков

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

Определение fallback языка

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

Пример структуры:

const supportedLanguages = ['en', 'fr', 'de'];
const defaultLanguage = 'en';

Здесь supportedLanguages содержит допустимые языки, а defaultLanguage — язык, на который будет перенаправлен пользователь, если запрошенный отсутствует.

Настройка маршрутов с языковым fallback

Маршруты можно организовать с использованием динамических параметров. Основная идея — создать маршрут вида /:lang/..., где :lang — это параметр языка. Затем, в функции action маршрута проверять его корректность и при необходимости перенаправлять на fallback.

import UniversalRouter from 'universal-router';

const routes = [
  {
    path: '/:lang(en|fr|de)?',
    async action(context) {
      let { lang } = context.params;

      // Если язык не указан или не поддерживается, используем defaultLanguage
      if (!lang || !supportedLanguages.includes(lang)) {
        lang = defaultLanguage;
        return { redirect: `/${lang}` };
      }

      return { page: `home-${lang}` };
    }
  }
];

const router = new UniversalRouter(routes);

В данном примере используется регулярное выражение для ограничения параметра :lang только поддерживаемыми значениями. Если язык отсутствует, выполняется редирект на defaultLanguage.

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

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

const pages = ['home', 'about', 'contact'];

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

// Добавляем fallback маршрут
routes.push({
  path: '(.*)',
  action: ({ pathname }) => {
    const fallbackPath = `/${defaultLanguage}${pathname}`;
    return { redirect: fallbackPath };
  }
});

Здесь создаются маршруты для каждой комбинации языка и страницы. Fallback маршрут перехватывает любые неподдерживаемые пути и перенаправляет на дефолтный язык с сохранением части пути.

Асинхронная обработка fallback

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

{
  path: '/:lang(en|fr|de)?/:page?',
  async action({ params }) {
    let { lang, page } = params;

    if (!supportedLanguages.includes(lang)) {
      lang = defaultLanguage;
    }

    if (!page) {
      page = 'home';
    }

    // Симуляция асинхронной загрузки контента
    const content = await fetchContent(lang, page);
    return { lang, page, content };
  }
}

Функция fetchContent может делать запрос на сервер, выбирать переводы и возвращать готовую страницу. Если язык недоступен, fallback гарантирует корректный результат без ошибки 404.

Совмещение с редиректами и мета-информацией

Fallback для языков удобно использовать вместе с SEO-настройками. Можно автоматически добавлять <link rel="alternate"> для разных языков или устанавливать мета-теги в зависимости от выбранного языка.

async function action({ params }) {
  let { lang } = params;
  if (!supportedLanguages.includes(lang)) lang = defaultLanguage;

  document.documentElement.lang = lang;

  return {
    page: `content-${lang}`,
    meta: {
      title: `Мой сайт - ${lang.toUpperCase()}`,
      description: `Описание страницы на ${lang}`
    }
  };
}

Таким образом, fallback язык влияет не только на навигацию, но и на корректное формирование HTML-документа и SEO-параметров.

Советы по организации fallback

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

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

Оглавление