Reactjs 从多个后端加载翻译

我使用React-i18创建了React应用程序。接下来，翻译存储在两个位置。其中一组存储在应用程序的本地文件夹中，其余的翻译来自远程API

我正在努力将这两套都加载到应用程序中。使用i18next chained后端插件，它似乎只在第一个后端未加载翻译时提供回退，我似乎无法将其配置为加载两组翻译

---

在基于React的应用程序中包含来自多个来源的翻译的最佳方法是什么？

我设法解决了这个问题

它适用于经典的i18next xhr后端

您需要准备组成路径的自定义函数：

const constructLoadPath = (languages, namespaces) => {
      if(namespaces[0] === 'basecontent'){
        return 'http://localhost:8080/api/i18n/{{lng}}/'
      }else {
        return '/locales/' + languages.join('+') + '/' + namespaces.join('+') + '.json';
      }
    } 

然后，您需要将此函数提供给后端的loadPath选项

backend: {
  loadPath: constructLoadPath,
}

---

我能够在不使用任何依赖项的情况下从不同的地方加载翻译。 （仅适用于npm软件包“react-i18next”和“i18next”）

以下是我遵循的步骤：

在

i18n.js

中，设置客户端语言环境定义

提供名称空间列表，以便在同一文件中的

ns

键中查找翻译键。 假设名称空间是['translations'，'bkdynamic']

在主react组件中，从API端点获取翻译。 在给定的沙盒中，API调用是一个模拟，它从

public/

目录中获取

sampleTx.json

。这可以替换为返回JSON的实际端点

使用

i18next.addResourceBundle

API，加载所需语言的这些翻译。 为所选语言在命名空间

bkdynamic

中加载新获取的翻译。 注意：在执行

i18next.addResourceBundle

调用时，将

deep

参数设置为

true

；因此，新的翻译将扩展。

其余的翻译API是相同的

现场沙箱-

• 本地翻译-“你好”，“早上好”
• 从另一个端点加载的翻译-“良好”

---

希望这能有所帮助。

同样的问题，为什么不在页面加载或语言更改时加载翻译并合并它们？