我使用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));
我不明白为什么我的文字不是。
答案 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();