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

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

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

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" и что я не использую определение языка так, как должен.

Ответ 1

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

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();

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

Итак, нет, это не так. Пусть плагин выполняет эту работу.:)

Ответ 2

@firstdoit:

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

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

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

Либо передаются через параметры (/george.php?lang=fr или /fr _FR/george.php)

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

var lang = this.props.lang || this.services.languageDetector.detect() || "Ан";

Что вы берете?

Ответ 3

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