Блог

Я использую «i18n» для многоязычной поддержки в моем «React.js» проект. У меня есть кнопка «Переключить» в компоненте «Навигационная панель». и когда эта кнопка нажата, я добавляю текущую информацию о языке в «lcoalstore». И когда я регистрируюсь в браузере, языковая опция динамически работает в «локальном магазине». Моя проблема в том, что я хочу менять язык приложения каждый раз, когда пользователь меняет язык. Но этого не происходит. Вот мой код i18n:

 import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import messages_az from "./translations/az.json";
import messages_en from "./translations/en.json";

// the translations
// (tip move them in a JSON file and import them)
const resources = {
  en: {
    translation: messages_en,
  },
  az: {
    translation: messages_az,
  },
};




i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: localStorage.getItem("lang"),
    detection: {
      order: ["localStorage", "lang"],
      lookupQuerystring: "lang",
      lookupLocalStorage: "lang",
      caches: ["localStorage"],
    },
    keySeparator: false, // we do not use keys in form messages.welcome
    fallbackLng: "az", // use az if detected lng is not available
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;
 

Я Это Исправил!

Вот моя кнопка swtich :

 <Menu.Item key="lang" className=" navMenuItem">
        <Switch
          onChange={langSwitch}
          className="langSwitch"
          checkedChildren="En"
          unCheckedChildren="Az"
          defaultChecked
        />
      </Menu.Item>
 

Итак, я добавил этот код в свою функцию langSwitch() :

 function langSwitch(checked) {
    console.log(`switch to ${checked}`);
    if (checked) {
      i18n.changeLanguage("en");
    } else {
      i18n.changeLanguage("az");
    }
  }