React i18next返回一个回退语言

Question

我在我的React应用程序中使用i18next来翻译文件：

i18next.js (原件)

import i18next from 'i18next';
import XHR from 'i18next-xhr-backend';
import detector from 'i18next-browser-languagedetector';

window.userLang = navigator.language || navigator.userLanguage;
i18next
    .use(detector)
    .use(XHR)
    .init({
        lng: window.userLang,
        fallbackLng: 'en',
        debug: true,
        interpolation: {
            escapeValue: false,
        },
    });

export default i18next;

使用上面的代码，我能够成功地基于用户的浏览器数据翻译页面。如果无法使用该语言，它将按预期返回到英语。

但是，我遇到了一些没有翻译成提供的密钥的组件。它们以下列方式在菜单组件中设置：

菜单组件

const projectArchives = i18next.t('LEFT_MENU.projectArchives');

export default {
    [KEY_ARCHIVE_MODEL]: {
        en: projectArchives,
        it: projectArchives,
    },

浏览器中的输出：LEFT_MENU.projectArchives

我将i18next.js文件更改为有一个变量(var data =)，该变量将从字符串中获取语言：

i18next.js (更新)

import i18next from 'i18next';
import XHR from 'i18next-xhr-backend';
import detector from 'i18next-browser-languagedetector';

window.userLang = navigator.language || navigator.userLanguage;

let language = window.userLang.split('-')[0];
var data = require(`../../public/locales/${language}/translation.json`); 
const FALLBACK_LOCALE = 'en';

i18next
    .use(detector)
    .use(XHR)
    .init({
        lng: window.userLang,
        fallbackLng: FALLBACK_LOCALE,
        debug: true,
        resources: {
            otherLanguages: FALLBACK_LOCALE,
            it: {
                translation: data,
            },
            en: {
                translation: data,
            },
        },
    });

export default i18next;

现在，菜单可以显示已翻译的键，但现在，如果没有原始代码中的语言可用，则返回以下错误：

Error: Cannot find module './fr/translation.json'.，因为当然没有可用的法文翻译文件。

发生此错误的原因是以下行：

var data = require(`../../public/locales/${language}/translation.json`);

我尝试将FALLBACK_LOCALE变量直接连接到英文翻译文件，但也失败了。

var FALLBACK_LOCALE = require(`../../public/locales/en/translation.json`);

如何强制使用回退语言或为预期的行为创建条件？

Answer 1

import i18next from 'i18next';
import XHR from 'i18next-xhr-backend';
import detector from 'i18next-browser-languagedetector';

window.userLang = navigator.language || navigator.userLanguage;

let language = window.userLang.split('-')[0];
const FALLBACK_LOCALE = 'en';

i18next
    .use(detector)
    .use(XHR)
    .init({
        lng: window.userLang,
        fallbackLng: FALLBACK_LOCALE,
        debug: true,
        resources: {
            otherLanguages: FALLBACK_LOCALE,
            it: {
                translation: require(`../../public/locales/it/translation.json`),
            },
            en: {
                translation: require(`../../public/locales/en/translation.json`),
            },
        },
    });

export default i18next;