Github project address: github.com/xutongbao/m…
Refer to the link: www.npmjs.com/package/rea…
Directory structure:
App.js
import React, { Component } from 'react';
import intl from 'react-intl-universal'
import { withRouter } from "react-router-dom";
class App extends Component {
constructor(props) {
super(props)
this.state = {
initDone: false}}render() {
return (
<div>
<div>{intl.get('login.username')}</div>
<div>{intl.get('editor.item.name')}</div>
<button onClick={this.handleLanguage.bind(this)}>In the EN /</button>
</div>); }}// Lifecycle
Object.assign(App.prototype, {
componentDidMount() {
let { location } = this.props
let ps = this.parseQueryString(location.search)
let currentLocale = ps.language || 'zh-CN'
intl.init({
currentLocale: currentLocale,
commonLocaleDataUrls: {
'zh': false.'en': false
},
locales: {
[currentLocale]: require(`./locales/${currentLocale}`).default
}
}).then(() = > {
this.setState({ initDone: true})})},handleLanguage() {
let { location } = this.props
let ps = this.parseQueryString(location.search)
if (ps.language === 'en-US') {
this.props.history.push('? language=zh-CN')}else if (ps.language === 'zh-CN') {
this.props.history.push('? language=en-US')}else {
this.props.history.push('? language=en-US')}window.location.reload()
},
parseQueryString(url) {
var params = {};
var arr = url.split("?");
if (arr.length <= 1) {
return params;
}
arr = arr[1].split("&");
for (var i = 0, l = arr.length; i < l; i++) {
var a = arr[i].split("=");
params[a[0]] = a[1];
}
returnparams; }})export default withRouter(App);
Copy the code
zh-CH.js
import editor from './zh-CN_Editor.js'
export default ({
login: {
"username": "Username",},editor: editor
})
Copy the code
zh-CN_Editor.js
export default ({
item: {
name: 'Xu Tongbao'}})Copy the code
en-US.js
import editor from './en-US_Editor.js'
export default ({
login: {
"username": "Username"
},
editor: editor
})
Copy the code
en-US_Editor.js
export default ({
item: {
name: 'Xutongbao'}})Copy the code