React i18next и правильный способ изменения языка

я разрабатываю многоязычное приложение, используя React,i18next и i18next-browser-languagedetector.

Я инициализирую i18next следующим образом:

i18n
  .use(LanguageDetector)
  .init({
    lng: localStorage.getItem(I18N_LANGUAGE) || "pt",
    fallbackLng: "pt",
    resources: {
      en: stringsEn,
      pt: stringsPt
    },
    detection: {
      order: ["localStorage", "navigator"],
      lookupQuerystring: "lng",
      lookupLocalStorage: I18N_LANGUAGE,
      caches: ["localStorage"]
    }
  });

export default i18n;

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

это правильный способ сделать это?

Я спрашиваю, потому что, хотя это работает, я чувствую, что я "обманываю", установив localStorage.getItem(I18N_LANGUAGE) || "pt" и что я не использую определение языка как я должен.

3 ответов


По словам документация, вам не нужно указывать язык самостоятельно:

import i18next from 'i18next';
import LngDetector from 'i18next-browser-languagedetector';

i18next
  .use(LngDetector)
  .init({
    detection: options
  });

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

if (!lng && this.services.languageDetector) lng = this.services.languageDetector.detect();

- это правильный способ сделать это?

Так, нет, это не так . Пусть плагин делает свою работу. :)


@firstdoit:

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

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

Я, в свою очередь, отдам приоритет текущему языку страницы:

  • либо передается через параметры (/george.РНР?lang=fr или / fr_FR / george.в PHP)

Это будет передано в качестве реквизита в мой код как prority, как следовать

  • var lang = это.реквизит.lang//этого.сервисы.languageDetector.detect () / / "en";

каково Ваше мнение?


Я думаю, что вы очень близки. Вы можете просто установить i18n с язык изначально. А затем после загрузки сохраненной языковой информации для localstorage или localforage или любого другого хранилища, вызовите i18nInstance.changeLanguage(lng).