时间戳

首页 > 解决方案 > React i18next 从前端（例如 localhost:3000）和后端（例如 localhost:5000）加载翻译文件

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

问题描述

我正在制作一个从后端获取数据并显示在浏览器中的反应应用程序。为了更改静态名称的语言（如页眉、页脚），如果我在公共文件夹中设置 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 的后端服务器加载翻译文件。但是，位于公共文件夹中的翻译文件现在未加载。

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

标签： reactjscustom-backendi18next-http-backend

解决方案

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

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

推荐阅读