Локализация путей

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

Определение маршрутов с локализацией

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

Пример структуры маршрутов с локализацией:

const routes = [
  {
    path: '/',
    name: 'home',
    action: () => 'Главная страница',
    localizedPaths: {
      en: '/',
      ru: '/',
      fr: '/'
    }
  },
  {
    path: '/about',
    name: 'about',
    action: () => 'О нас',
    localizedPaths: {
      en: '/about',
      ru: '/o-nas',
      fr: '/a-propos'
    }
  }
];

В данном примере localizedPaths содержит альтернативные URL для каждого языка. При обработке маршрута можно использовать выбранный язык для поиска соответствующего пути.

Создание универсального локализованного маршрутизатора

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

function createLocalizedRouter(routes, currentLocale) {
  const localizedRoutes = routes.map(route => {
    const localizedPath = route.localizedPaths[currentLocale] || route.path;
    return {
      ...route,
      path: localizedPath
    };
  });
  return new UniversalRouter(localizedRoutes);
}

Эта функция позволяет централизованно управлять локализацией, изменяя текущий язык и автоматически перенастраивая маршруты.

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

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

const routes = [
  {
    path: '/product/:id',
    name: 'product',
    action: ({ params }) => `Продукт с ID: ${params.id}`,
    localizedPaths: {
      en: '/product/:id',
      ru: '/produkt/:id'
    }
  }
];

const router = createLocalizedRouter(routes, 'ru');

router.resolve('/produkt/123').then(console.log);
// Вывод: Продукт с ID: 123

В этом примере динамический параметр :id корректно подставляется независимо от локали, что обеспечивает единообразное поведение приложения для разных языков.

Переключение локали и перенаправление

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

let currentLocale = 'ru';
let router = createLocalizedRouter(routes, currentLocale);

function switchLocale(newLocale, currentPath) {
  currentLocale = newLocale;
  router = createLocalizedRouter(routes, currentLocale);

  const route = routes.find(r =>
    Object.values(r.localizedPaths).includes(currentPath)
  );
  
  if (route) {
    const newPath = route.localizedPaths[newLocale];
    return router.resolve(newPath);
  }
  return router.resolve('/');
}

switchLocale('en', '/produkt/123').then(console.log);
// Вывод: Product page with ID: 123

Такая стратегия позволяет сохранять контекст пользователя при смене языка и корректно перенаправлять на эквивалентный маршрут на новом языке.

Интеграция с React или Vue

При использовании Universal Router вместе с современными фреймворками локализация путей легко интегрируется в компонентную архитектуру. Для React можно использовать useEffect для слежения за изменением локали и перенаправления:

useEffect(() => {
  router.resolve(currentPath).then(setPageContent);
}, [currentPath, currentLocale]);

Для Vue можно реализовать реактивное наблюдение за языком через watch и аналогично вызывать router.resolve.

Управление SEO для локализованных путей

Локализованные пути критичны для SEO, так как поисковые системы индексируют URL отдельно для каждого языка. Рекомендуется:

  • Использовать canonical-ссылки на оригинальный путь.
  • Генерировать sitemap с локализованными URL.
  • Поддерживать hreflang-теги для всех языковых версий страницы.

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

Резюме

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

Оглавление