登录后更新i18n支持语言及自定义翻译文件重载异常问题

核心问题分析 #

刷新后翻译失效的本质是自定义语言的配置与资源未做持久化存储，或是初始i18n初始化流程未读取持久化的自定义语言设置，导致i18n无法识别当前语言，自动回退到fallback语言。

分步解决方案 #

1. 持久化自定义语言配置 #

用户创建自定义翻译文件后，必须将新增的语言标识（比如'fr-custom'这类自定义键）和对应翻译资源存储到localStorage或后端数据库，确保刷新页面后能重新读取。

示例代码：

// 保存自定义语言配置到localStorage
function saveCustomLanguage(langKey, translations) {
  const customLangs = JSON.parse(localStorage.getItem('customLanguages')) || {};
  customLangs[langKey] = translations;
  localStorage.setItem('customLanguages', JSON.stringify(customLangs));
  // 同步保存当前激活的语言（如果用户切换到了自定义语言）
  localStorage.setItem('activeLanguage', langKey);
}

2. 修改i18n初始化流程，加载持久化资源 #

在i18n.js初始化阶段，不再仅依赖固定的['en', 'tr', 'de']，而是先读取本地存储的自定义语言配置，动态合并到资源列表中。

示例初始化代码：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// 基础语言资源
const baseResources = {
  en: { translation: require('./locales/en.json') },
  tr: { translation: require('./locales/tr.json') },
  de: { translation: require('./locales/de.json') }
};

// 读取本地存储的自定义语言
const customLangs = JSON.parse(localStorage.getItem('customLanguages')) || {};
// 合并基础资源与自定义资源
const allResources = { ...baseResources };
Object.keys(customLangs).forEach(langKey => {
  allResources[langKey] = { translation: customLangs[langKey] };
});

// 获取上次激活的语言，默认用fallback值
const activeLang = localStorage.getItem('activeLanguage') || 'en';

i18n
  .use(initReactI18next)
  .init({
    resources: allResources,
    lng: activeLang,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

3. 修正updateLanguageSettings函数逻辑 #

调用reloadResources前，确保自定义语言已被添加到i18n资源列表，并且正确切换到目标语言：

export function updateLanguageSettings(langKey, translations) {
  // 先保存到持久化存储
  saveCustomLanguage(langKey, translations);
  // 动态添加资源到i18n，deep和overwrite设为true确保合并/覆盖生效
  i18n.addResourceBundle(langKey, 'translation', translations, true, true);
  // 切换到该语言
  i18n.changeLanguage(langKey);
  // 无需单独调用reloadResources，addResourceBundle和changeLanguage已处理重载逻辑
}

4. 后端托管自定义翻译的适配 #

如果自定义翻译文件是通过后端上传存储的，初始化时需要先从后端拉取已上传的资源，再合并到i18n中：

// 初始化时从后端获取自定义翻译
async function initCustomLanguages() {
  const res = await fetch('/api/custom-languages');
  const customLangs = await res.json();
  // 同步到localStorage
  localStorage.setItem('customLanguages', JSON.stringify(customLangs));
  // 合并到i18n资源
  Object.keys(customLangs).forEach(langKey => {
    i18n.addResourceBundle(langKey, 'translation', customLangs[langKey], true, true);
  });
  // 切换到上次激活的语言
  const activeLang = localStorage.getItem('activeLanguage') || 'en';
  await i18n.changeLanguage(activeLang);
}

// 在i18n初始化完成后调用
initCustomLanguages();

关键注意点 #

• 不要仅依赖reloadResources维持自定义资源，刷新后i18n会重新执行init，之前添加的资源会丢失，必须从持久化存储重新加载。
• addResourceBundle的最后两个参数deep和overwrite设为true，确保自定义翻译能正确合并或覆盖基础翻译内容。
• 始终同步当前激活语言到持久化存储，避免刷新后语言自动重置。

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