使用i18next+LanguageDetector设置默认语言时fallbackLng不生效如何解决

开发者阿泽

2026-10-4

问题原因

你引入的i18next-browser-languagedetector插件的语言检测优先级高于全局fallbackLng配置：fallbackLng仅在所有检测规则都没有匹配到有效语言时才会生效，你配置的检测顺序中，用户首次访问无cookie、localStorage等存储的语言标识时，会命中navigator规则，读取浏览器的默认语言，若你的测试环境浏览器默认语言为英语，就会返回en。
语言检测插件默认会将检测到的语言自动写入你配置的存储介质，因此会自动在localStorage写入lng: 'en'。

解决方法

你可以根据自己的业务需求选择对应调整方案：

场景1：首次访问强制默认瑞典语，不读取浏览器语言

调整检测配置，移除navigator检测项，同时单独配置检测插件的默认返回语言：

import LanguageDetector from "i18next-browser-languagedetector";
const options = {
  // 移除navigator检测规则
  order: ['cookie', 'localStorage', 'sessionStorage', 'htmlTag', 'path', 'subdomain'],
  lookupLocalStorage: 'lng',
  // 所有检测规则未命中时返回的默认语言，优先级高于全局fallbackLng
  fallbackLng: 'sv'
}

i18next.use(LanguageDetector).use(initReactI18next).init({
  interpolation: { escapeValue: false },
  detection: options,
  fallbackLng: 'sv',
  supportedLngs: ['sv', 'en'],
  resources: {
      en: {
          common: common_en
      },
      sv: {
          common: common_sv
      },
  },
});

场景2：保留浏览器语言检测逻辑，仅禁止自动写入localStorage

在检测配置中清空缓存规则即可：

const options = {
  order: ['cookie', 'localStorage', 'sessionStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
  lookupLocalStorage: 'lng',
  // 不缓存检测到的语言
  caches: []
}