i18next load配置未达预期：React项目默认语言存储问题

我在React项目中使用i18next，需求是当浏览器语言不是精确的en时，默认存储语言设为en（不希望存储en-US）。查文档后设置了load: "currentOnly"，但浏览器语言为en-US、fallbackLng设为en时，存储的默认值还是en-US。我原本以为因为没有en-US的翻译文件，设置currentOnly会触发fallback到en，请问哪里错了？怎么修复？

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    load: "currentOnly",
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

原因分析 #

• load: "currentOnly"的作用是只加载当前检测到的语言（比如en-US），不会自动加载上级语言（en），但它不影响语言检测阶段的存储值——LanguageDetector会把检测到的原始浏览器语言（en-US）存在localStorage里，哪怕这个语言没有对应的翻译文件。
• fallbackLng是用来兜底显示翻译内容的，当加载不到对应语言的翻译时会用fallback语言的内容，但它不会主动修改存储的语言标识。

修复方案 #

给LanguageDetector添加自定义语言转换逻辑，把所有en开头的地区变体统一转换成en，再进行存储。修改后的代码如下：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    load: "currentOnly",
    interpolation: {
      escapeValue: false,
    },
    // 配置LanguageDetector的自定义转换规则
    detection: {
      convertDetectedLanguage: (lng) => {
        // 对所有en开头的语言变体，统一返回en
        if (lng.startsWith("en-")) {
          return "en";
        }
        // 其他语言保持原检测值
        return lng;
      }
    }
  });

export default i18n;

说明 #

• convertDetectedLanguage是LanguageDetector提供的钩子函数，允许你在语言检测完成后修改最终使用的语言标识，再进行存储和后续的翻译加载。
• 这样设置后，不管浏览器返回的是en-US、en-GB还是其他英语变体，都会被转换成en存储，同时加载en的翻译文件，完全符合你的需求。

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