应用程序未翻译i18next

时间:2018-11-16 11:41:40

标签: reactjs internationalization i18next

我使用i18next,但我的应用程序未翻译。没有消息显示,并且控制台中没有错误。

Index.js

import React from 'react';
import ReactDOM  from 'react-dom';

import { I18nextProvider } from 'react-i18next';
import i18next from 'i18next';

import "assets/scss/material-kit-react.css?v=1.3.0";
import "assets/scss/material-kit-react.css?v=1.3.0";
import * as serviceWorker from './serviceWorker';

import { createBrowserHistory } from "history";

import messages_fr from "locales/fr.json";

const hist = createBrowserHistory();

i18next.init({
    interpolation: { escapeValue: false },  // React already does escaping
    lng: 'fr',                              // language to use
    resources: {
        fr: {
            langue: messages_fr
        },
    },
});

ReactDOM.render((
<I18nextProvider i18n={i18next}>
   </Login>
</I18nextProvider>
), document.getElementById('root')
);
serviceWorker.unregister();

在我的页面中:

import { translate, Trans } from 'react-i18next';

<Trans i18nKey='myKey.mySubKey'></Trans>

export default translate('langue')(withStyles(loginPageStyle)(LoginPage));

我不明白为什么我的文字不是。

2 个答案:

答案 0 :(得分:0)

我是这样创建的,但是我的应用程序始终保持英语,而浏览器的语言是法语。

i18next
.use(LanguageDetector)
.init({
 interpolation: { escapeValue: false },
 lng: 'en',
 resources: {
  en: {
    langue: messages_en
  },
  fr: {
    langue: messages_fr
  },
 },
});

答案 1 :(得分:0)

我的index.js:

import React from 'react';
import ReactDOM  from 'react-dom';

import { Router, Route, Switch, Redirect } from "react-router-dom";

import { I18nextProvider } from 'react-i18next';
import i18next from 'i18next';

import * as serviceWorker from './serviceWorker';

import { createBrowserHistory } from "history";

import indexRoutes from "routes/index.jsx";

import messages_en from "locales/en.json";
import messages_fr from "locales/fr.json";

import LanguageDetector from 'i18next-browser-languagedetector';

const hist = createBrowserHistory();

i18next
 .use(LanguageDetector)
 .init({
  interpolation: { escapeValue: false },
  fallbackLng: 'en',
  resources: {
   en: {
    langue: messages_en
   },
   fr: {
    langue: messages_fr
   },
  },
 });

 ReactDOM.render((
  <I18nextProvider i18n={i18next}>
   <Router history={hist}>
    <Switch>
     {indexRoutes.map((prop, key) => {
      if (prop.redirect)
        return <Redirect from={prop.path} to={prop.to} key={key} />;
      return <Route path={prop.path} component={prop.component} key={key} />;
     })}
    </Switch>
   </Router>
  </I18nextProvider>
 ), document.getElementById('root'));

serviceWorker.unregister();