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

Почему многоязычность так важна?

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

Например, вместо использования универсального URL /about, вы можете настроить маршруты так, чтобы они отображали язык, например, /en/about для английского или /ru/about для русского.

Шаги к реализации маршрутов с поддержкой языков

1. Настройка React Router
Для начала необходимо установить библиотеку React Router. Если вы еще этого не сделали, установите её с помощью команды:

npm install react-router-dom

Когда библиотека установлена, создайте базовую структуру маршрутов. Пример:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import Home from './pages/Home';

import About from './pages/About';



function App() {

  return (

    <Router>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

      </Routes>

    </Router>

  );

}



export default App;

Этот код создаёт два маршрута: / для главной страницы и /about для страницы "О нас".

2. Добавление параметра языка в маршруты
Чтобы поддерживать несколько языков, вы можете добавить параметр языка в URL. Для этого измените маршруты так, чтобы они включали язык:

function App() {

  return (

    <Router>

      <Routes>

        <Route path="/:lang" element={<Home />} />

        <Route path="/:lang/about" element={<About />} />

      </Routes>

    </Router>

  );

}

Теперь ваши URL будут содержать язык, например, /en или /ru/about.

3. Получение параметра языка
React Router позволяет получать параметры из маршрута. Используйте useParams, чтобы получить текущий язык:

import { useParams } from 'react-router-dom';



function Home() {

  const { lang } = useParams();



  return (

    <div>

      <h1>{lang === 'ru' ? 'Добро пожаловать!' : 'Welcome!'}</h1>

    </div>

  );

}

В этом примере заголовок страницы будет отображаться на русском, если в URL указан язык ru.

Как переключать языки?

Добавление переключателя языка — это простой способ дать пользователям возможность сменить язык на сайте.

1. Реализация переключателя
Создайте компонент для переключения языков, который будет обновлять URL-адрес:

import { useNavigate, useParams } from 'react-router-dom';



function LanguageSwitcher() {

  const navigate = useNavigate();

  const { lang } = useParams();



  const changeLanguage = (newLang) => {

    const currentPath = window.location.pathname.replace(`/${lang}`, '');

    navigate(`/${newLang}${currentPath}`);

  };



  return (

    <div>

      <button onClick={() => changeLanguage('en')}>English</button>

      <button onClick={() => changeLanguage('ru')}>Русский</button>

    </div>

  );

}

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

2. Сохранение выбранного языка
Чтобы сделать выбор языка более удобным, вы можете сохранить его в локальном хранилище. Например:

import { useEffect } from 'react';



function useLanguage() {

  useEffect(() => {

    const userLang = localStorage.getItem('language') || 'en';

    if (!window.location.pathname.startsWith(`/${userLang}`)) {

      window.location.pathname = `/${userLang}${window.location.pathname}`;

    }

  }, []);



  const setLanguage = (lang) => {

    localStorage.setItem('language', lang);

  };



  return { setLanguage };

}

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

Управление переводами

Теперь, когда маршруты поддерживают языки, нужно добавить переводы для контента. Вы можете использовать библиотеку, например, react-i18next.

1. Установка i18next
Установите библиотеку:

npm install i18next react-i18next

Затем настройте переводы в отдельном файле:

// i18n.js

import i18n from 'i18next';

import { initReactI18next } from 'react-i18next';



const resources = {

  en: {

    translation: {

      welcome: 'Welcome!',

      about: 'About us',

    },

  },

  ru: {

    translation: {

      welcome: 'Добро пожаловать!',

      about: 'О нас',

    },

  },

};



i18n.use(initReactI18next).init({

  resources,

  lng: 'en', // Язык по умолчанию

  interpolation: {

    escapeValue: false,

  },

});



export default i18n;

2. Использование переводов в компонентах
Импортируйте и используйте переводы:

import { useTranslation } from 'react-i18next';



function Home() {

  const { t } = useTranslation();



  return <h1>{t('welcome')}</h1>;

}

3. Автоматическое определение языка
Вы можете автоматически устанавливать язык на основе маршрута:

import i18n from './i18n';

import { useParams } from 'react-router-dom';



function App() {

  const { lang } = useParams();



  useEffect(() => {

    if (lang) {

      i18n.changeLanguage(lang);

    }

  }, [lang]);



  return <div>{/* Ваши компоненты */}</div>;

}

Теперь язык будет меняться автоматически в зависимости от маршрута.