未从公用文件夹加载文件中的i18next

Question

我正在尝试加载多个翻译文件到react应用程序。到目前为止，我已经能够分离文件，但在尝试附加两个不同翻译文件的名称时遇到了问题-- /locales/{{lng}}/{{ns}}.json?lng=en+es&ns=translation1+translation2)

我已经解决了这个问题，但现在它无法从公用文件夹中读取

我的配置文件如下所示

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import Http from 'i18next-http-backend'
import { initReactI18next } from 'react-i18next'
import BackendAdapter from 'i18next-multiload-backend-adapter'

const languages = ['en', 'es']

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    defaultNS: 'menus',
    fallbackLng: 'en',
    debug: true,
    whitelist: languages,
    lng: 'en',

    backend: {
      backends:[
        new BackEndAdapter(null, {
          backend: new Http(null,{
            loadPath: `${process.env.PUBLIC_URL}/locales/{{lng}}/{{ns}}.json?lng={{lng}}&{{ns}}`,
            addPath: `${process.env.PUBLIC_URL}/locales/add/{{lng}}/{{ns}}`,
            allowMultiLoading: true
          })
        })
      ]    
    },

    interpolation: {
      escapeValue: false
    }
  })

export default i18n

package.json

{
   "i18next": "^19.5.1",
   "i18next-http-backend": "^1.0.15",
   "i18next-multiload-backend-adapter": "^1.0.0"
}

使用this作为参考，了解为什么需要多负载适配器

Answer 1

它应该看起来像这样：

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

const languages = ['en', 'es'];

i18n
  .use(HttpBackend)
  .use(initReactI18next)
  .init({
    defaultNS: 'menus',
    fallbackLng: 'en',
    debug: true,
    whitelist: languages,
    lng: 'en',

    backend: {
      loadPath: `${process.env.PUBLIC_URL}/locales/{{lng}}/{{ns}}.json?lng={{lng}}&{{ns}}`,
      addPath: `${process.env.PUBLIC_URL}/locales/add/{{lng}}/{{ns}}`,
    },

    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;