Reactjs 为什么';是否将丢失的键保存到translation.json(i18next)?

Reactjs 为什么';是否将丢失的键保存到translation.json(i18next)?,reactjs,localization,i18next,react-i18next,Reactjs,Localization,I18next,React I18next,我决定使用i18next&react-i18next来翻译我的react应用程序。 一切都很好,直到我想用字符串代替键。我的应用程序告诉我,它无法将丢失的密钥保存到translation.json文件中,因为找不到它们。即使文件在那里。 我也得到了。 我认为这个问题很小,但我还没有找到解决方案,我希望这里有更有经验的人能帮助我解决这个问题 我的下一个配置: import i18n from 'i18next'; import { initReactI18next } from 'react-i1

我决定使用
i18next
&
react-i18next
来翻译我的react应用程序。 一切都很好,直到我想用字符串代替键。我的应用程序告诉我,它无法将丢失的密钥保存到translation.json文件中,因为找不到它们。即使文件在那里。 我也得到了。 我认为这个问题很小,但我还没有找到解决方案,我希望这里有更有经验的人能帮助我解决这个问题

我的下一个配置:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
  react: {
    useSuspense: false, //   <---- this will do the magic
    wait: true
  },
  backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
      addPath: '/locales/add/{{lng}}/{{ns}}',
      allowMultiLoading: true,
    },
  lng: 'en',
  nsSeparator: false,
  keySeparator: false,
  fallbackLng: 'en',
  fallbackNS: 'translation',
  debug: true,
  ns: ["translation", "header", "random"],
  defaultNS: "translation",
  saveMissing: true
 });

 i18n
 .loadNamespaces(['translation','header'])
 .then(() => {});

 i18n.on('missingKey', function(lngs, namespace, key, res) {console.log(key)});

 export default i18n;

为什么要加载两次名称空间?由于您已经在init中定义了它们,因此可以避免在之后加载

问题可能是因为您试图在init完成之前加载名称空间


此外,您似乎错过了
addPath
键中的
.json
扩展名,这是因为您的翻译文件没有加载(请查看控制台中的网络-只有状态200正常)。这些方法帮助了我:

  • 区域设置必须位于public/assets中,并且每个文件夹中只有一个文件-translation.json和json对象
  • 我使用Webpack,如果第一种方法没有帮助,我使用以下构造:
    newcopyWebpackPlugin([{from:'assets/locales',to:'locales'}])
    在插件中
  • 希望它能帮助你

    import React from 'react';
    import i18n from './i18n/i18n';
    import ReactDOM from 'react-dom';
    import App from './App';
    import './index.css';
    import * as serviceWorker from  './registerServiceWorker';
    import {I18nextProvider} from 'react-i18next';
    
    
    ReactDOM.render(
        <I18nextProvider i18n={i18n}>
            <App/>
        </I18nextProvider>,
      document.getElementById('root')
    );
    serviceWorker.register();
    
    {t('Need to save this text')}