如何消除react-i18next因Chrome提交de-DE locale引发的加载警告？

以下几种方法可以让你仅保留locales/de目录的同时，消除Chrome中的加载警告：

方法1：配置语言降级与仅加载语言代码 #

在i18next初始化时，通过fallbackLng设置de-DE降级到de，同时开启load: 'languageOnly'让i18next只处理不带地区后缀的语言代码：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    fallbackLng: {
      'de-DE': ['de'],
      default: ['en']
    },
    load: 'languageOnly', // 忽略locale中的地区部分，仅使用语言代码
    // 其他原有配置...
  });

方法2：自定义Backend的路径解析逻辑 #

如果你使用i18next-http-backend，可以通过parseLng方法强制提取locale中的语言代码，让所有带地区的locale都指向对应语言目录：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
      parseLng: (lng) => lng.split('-')[0] // 提取语言代码部分，比如将de-DE转为de
    },
    // 其他原有配置...
  });

方法3：预处理浏览器返回的locale值 #

在初始化i18next前，先将浏览器返回的locale处理为仅含语言代码的格式，再传入配置：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';

// 提取浏览器locale中的语言代码
const userLanguage = navigator.language.split('-')[0];

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    lng: userLanguage,
    fallbackLng: 'en',
    // 其他原有配置...
  });

以上任意一种方法都能让i18next统一加载locales/de下的翻译文件，无需创建de-DE目录即可消除Chrome中的警告。

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