React i18next 返回一个后备语言答案

【问题标题】：React i18next return a fallback languageReact i18next 返回一个后备语言
【发布时间】：2020-12-07 11:24:21
【问题描述】：

我在我的 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`);

如何强制使用后备语言或为预期行为创建条件？

【问题讨论】：

标签： javascript reactjs i18next

【解决方案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;

【讨论】：