Блог

В моем приложении есть два перевода с использованием i18n translator, и я безуспешно пытаюсь установить язык по умолчанию.

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

Где я могу создать какую-то логику, которая сообщит i18n, какой язык поступает из серверной части?

Значение будет отображаться примерно так:

 const defaultLang = currentUser.data.laiso //this will output a string eg. 'en'
 

Файл конфигурации i18n выглядит примерно так:

 import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const Languages = ['en', 'de'];

i18n

  .use(Backend)

  .use(LanguageDetector)

  .use(initReactI18next)

  .init({
    fallbackLng: 'en',
    debug: true,
    whitelist: Languages,

    interpolation: {
      escapeValue: false
    }
  });


export default i18n;
 

Должно быть что-то написано под .use(Backend) ?
Это первый раз, когда используется i18n, поэтому любые подсказки будут оценены.

Это мой компонент, в котором мне нужен перевод. В нем я попытался установить индекс i18n.languages на основе предпочитаемого языка, но это не работает:

 import React from 'react'
import { useTranslation } from 'react-i18next';


export default function Dashboard() {
    //the logged user
    const currentUser = AuthService.getCurrentUser();
    //value from database
    const defaultLang = currentUser.data.laiso //this will output a string eg. 'en'

    //translation
    const { t, i18n } = useTranslation();

    function handleClick(lang) {
        i18n.changeLanguage(lang);
    }

    const current = i18n.languages[defaultLang === 'en' ? 0 : 1]


    return (
        <>
        <div className={styles.languageSelector}>
        <a 
          onClick={ () => handleClick('en') }
          style={{ fontWeight: current === "en" ? 800 : 400}}
        >
          EN
        </a>
        <a 
          onClick={ () => handleClick('de') }
          style={{ fontWeight: current === "de" ? 800 : 400}}
        >    
          DE
        </a>
      </div>
      <div>{t('translated.stuff')}</div>
      </>
    )
}
 

вы можете сделать это, просто добавив lng: 'en' inside .init()

 .init({
    fallbackLng: 'en',
    lng: 'en', // default language
    debug: true,
    whitelist: Languages,
    interpolation: {
        escapeValue: false
    }
});
 

https://www.i18next.com/overview/configuration-options

Я думаю, вам нужен хук для повторного отображения страницы при изменении языка. Таким образом, вы могли бы добавить это в свой Dashboard.jsx:

   React.useEffect(() => {
    const handleLanguageChange = () => {
      // Refresh your component, maybe use a hook for it.
    };

    i18next.on("languageChanged", handleLanguageChange);

    return () => {
      i18next.off("languageChanged", handleLanguageChange);
    };
  }, []);
 

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

Мне удалось решить эту проблему с помощью useEffect.

 //set the language from database
  useEffect(() => {
    i18n.changeLanguage(currentUser.data.laiso);
  }, []);
 

Вот и все,
спасибо