React i18next 从前端（例如 localhost:3000）和后端（例如 localhost:5000）加载翻译文件答案

【问题标题】：React i18next loading translation files both from frontend (e.g. localhost :3000) and backend (e.g. localhost:5000)React i18next 从前端（例如 localhost:3000）和后端（例如 localhost:5000）加载翻译文件
【发布时间】：2021-09-22 15:27:24
【问题描述】：

我正在制作一个从后端获取数据并显示在浏览器中的反应应用程序。为了更改静态名称的语言（如页眉、页脚），如果我在公共文件夹中设置 locales 文件夹，并为所需的语言代码创建所有 json 文件，则会更改它。

现在，我也想从后端加载翻译文件，因为从后端获取的数据总是随机的，后端会发送相应的翻译文件。

我很困惑如何实现这一目标。

我经历过很多 stackoverflow 解决方案，建议使用自定义后端插件。但是，我很困惑如何创建自定义后端插件。

这是我的 i18next.js 配置的部分代码：

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

i18n
.use(initReactI18next)
.use(Backend)
.init({
    ns:['common', 'translation'],
    defaultNS : 'common',
//still loads the translation files if I do not define below line (because it is in public folder in react app)
    backend: { loadPath: "/locales/{{lng}}/{{ns}}.json" }
});

从上面的代码中，我只能加载前端的翻译文件。如果我将“后端”行更改为：

backend : { loadPath : "http://localhost:5000/locales/{{lng}}/{{ns}}.json"

它会从 localhost:5000 的后端服务器加载翻译文件。但是，位于 public 文件夹中的翻译文件现在没有加载。

谁能帮忙举个例子，如何加载两个路径，以便前端和后端的翻译文件都能正常工作。

【问题讨论】：

标签： reactjs custom-backend i18next-http-backend

【解决方案1】：

当您在本地项目和后端翻译中都定义了资源时，您可以使用i18next-chained-backend 库来支持两者。请参考简短示例here。

参考：https://www.i18next.com/how-to/add-or-load-translations

【讨论】：

非常感谢。我刚刚尝试了 i18next-chained-backend，我得到了我正在寻找的东西。我将进一步了解添加或加载翻译。非常感谢您的帮助:)
很高兴听到...很好