React中i18n路由切换/页面刷新后语言重置问题咨询

1. 初始化i18next时禁用自动语言检测 #

在i18n配置文件（如i18n.js）中，直接指定初始语言为本地存储的值，并禁用自动检测逻辑：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';
import zh from './locales/zh.json';

// 从本地存储读取已保存的语言，默认值设为'en'
const savedLocale = localStorage.getItem('i18nextLng') || 'en';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      zh: { translation: zh }
    },
    lng: savedLocale, // 强制初始语言为存储值
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    },
    detection: {
      order: [], // 清空自动检测顺序，禁用所有自动检测方式
      caches: []
    }
  });

export default i18n;

2. 语言切换时同步更新本地存储 #

手动切换语言时，必须将选中的语言保存到localStorage，确保刷新或路由切换后能读取到：

const { i18n } = useTranslation();

const changeLanguage = (lng) => {
  i18n.changeLanguage(lng);
  localStorage.setItem('i18nextLng', lng); // 同步保存到本地存储
};

3. 组件内兜底校验（可选） #

如果部分组件仍出现语言重置，可在组件挂载时手动校验并修正当前语言：

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

const MyComponent = () => {
  const { i18n } = useTranslation();

  useEffect(() => {
    const savedLocale = localStorage.getItem('i18nextLng') || 'en';
    if (i18n.language !== savedLocale) {
      i18n.changeLanguage(savedLocale);
    }
  }, [i18n]);

  // 组件业务逻辑
};

通过以上配置，i18next会优先使用本地存储的语言值，彻底避免自动推测浏览器语言导致的重置问题。

内容的提问来源于stack exchange，提问作者user66554