reactjs - React-i18next 未在使用 create-react-app 创建的 React 应用程序中加载 json 翻译文件

Question

我使用 create-react-app 创建了一个 React 应用程序

我想实现翻译，我发现 react-i18next

安装所需的软件包后，我设置了 i18n.js 配置文件:

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import XHR from 'i18next-xhr-backend';

i18n
    .use(XHR)
    .use(LanguageDetector)
    .init({
      debug: true,
      lng: 'en',
      nsSeparator: false,
      keySeparator: false,
      fallbackLng: false,
      backend: {
        loadPath: 'locales/{{lng}}/{{ns}}.json'
      }
    });


export default i18n;

我收到此错误:i18next::backendConnector:加载语言的命名空间翻译失败，无法将 locales/en/translation.json 解析为 json

发生这种情况是因为 webpack 找不到 json 文件，而是返回了 index.html 文件内容:

Answer 1

我不确定您将区域设置文件放在哪里，但我看到两个问题:

1. 您已指定相对 URL，因此加载 /kiosk/parents/locales 而不是 /locales。您需要在加载路径的开头添加斜杠。

2. 要让 Create React App 提供静态文件，您需要将它们放入 public 文件夹中。其用户指南对此进行了更详细的描述。因此，请确保 locales 位于项目根目录的 public 文件夹内。

希望这有帮助!