React 覆盖语言环境

Question

当我更改路线或重新加载页面时，语言会重置。

在控制台上我收到此日志消息：

i18next: languageChanged en

我认为这是由于这个电话而发生的：

const { i18n } = useTranslation();

我怎样才能告诉它使用我存储的区域设置（比如说在变量

locale

中）而不是再次猜测？

Answer 1

在组件安装时更新区域设置，然后使用相同的区域设置。

function LanguageSelector() {
  const { i18n } = useTranslation();

  // Load the saved locale from localStorage or use a default value
  const savedLocale = localStorage.getItem('locale') || 'en';

  // Set the initial language when the component mounts
  useEffect(() => {
    i18n.changeLanguage(savedLocale);
  }, [i18n, savedLocale]);

  const changeLanguage = (language) => {
    // Save the selected locale to localStorage
    localStorage.setItem('locale', language);

    // Change the language
    i18n.changeLanguage(language);
  };

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('es')}>Español</button>
    </div>
  );
}