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

Question

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

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

我对如何实现这一点感到非常困惑。

我看过很多Whosebug的解决方案，建议使用自定义后端插件。但是，我对如何创建自定义后端插件感到困惑。

这是我的 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"

它将从位于本地主机的后端服务器加载翻译文件：5000。但是，位于 public 文件夹中的翻译文件现在未加载。

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

Answer 1

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

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

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

React i18next loading translation files both from frontend (e.g. localhost :3000) and backend (e.g. localhost:5000)

custom-backend

reactjs

i18next-http-backend