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: loading namespace translation for language en failed failed parsing locales/en/translation.json to json

这是因为webpack找不到json文件并返回index.html文件内容:

Answer 1

我不确定你在哪里放置语言环境文件,但我看到两个问题:

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

2. 要使Create React App提供静态文件,您需要将它们放入public文件夹中.这在用户指南中有更详细的描述.因此,请确保在项目根目录下locales的public文件夹中.

希望这可以帮助!

Answer 2

以防万一有人像我一样需要这个：

如果您碰巧在 package.json 文件中更改了主页路径，如下所示：

...
    "homepage": "/tom/",
...

您还需要将此部分添加到 i18n，如下所示：

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


export default i18n;