online/src/design.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import DevelopVersion from './devApp/developVersion/DevelopVersion';
import DevApp from './devApp/devApp';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";

import ApolloClient from "apollo-boost";
import {ApolloProvider} from "react-apollo";

import {IntlProvider, addLocaleData} from 'react-intl';
//如果浏览器没有自带intl，则需要在使用npm安装intl之后添加如下代码
// import intl from 'intl';
import zh from 'react-intl/locale-data/zh';
import en from 'react-intl/locale-data/en';
import zh_CN from './language/zh_CN.js';
import en_US from './language/en_US.js';
import {graphqlUrl} from "./config";
//import BasicVersion from "./app/basicVersion/BasicVersion";
import Login from "./login/Login";


addLocaleData([...en, ...zh]);


const client = new ApolloClient({
    uri: graphqlUrl
});

let browserLanguage = (navigator.language || navigator.browserLanguage).toLowerCase().split('-')[0];
let language = browserLanguage === 'zh' ? "中文" : "English";


class MainApp extends Component {
    constructor() {
        super();
        sessionStorage.setItem("language", language);
        this.state = {
            language: sessionStorage.getItem("language")
        };
    }

    changeLanguage = (language) => {
        // console.log("index changeLanguage",language);
        this.setState({
            language: language
        });
    };

    chooseLocale = (language) => {
        let locale, messages;
        switch (language) {
            case "English":
                locale = 'en';
                messages = en_US;
                return {locale, messages};

            case "中文":
                locale = 'zh';
                messages = zh_CN;
                return {locale, messages};

            default:
                locale = 'zh';
                messages = zh_CN;
                return {locale, messages};
        }
    };

    render() {
        let {language} = this.state;
        let {locale, messages} = this.chooseLocale(language);
        let ownProps = {
            language,
            changeLanguage: this.changeLanguage
        };
        const PrivateRoute = ({component: Component, ownProps, ...rest}) => (
            <Route {...rest} render={(props) => {
                return <Component {...ownProps} {...props}/>
            }}/>
        );
        return (
            <ApolloProvider client={client}>
                <IntlProvider locale={locale} messages={messages}>
                    <Router>
                        <Switch>
                            <Route exact path="/" component={DevApp}/>
                            <PrivateRoute path="/developer" ownProps={ownProps} component={DevelopVersion}/>
                            <Route path="/login" component={Login}/>
                        </Switch>
                    </Router>
                </IntlProvider>
            </ApolloProvider>
        )
    }
}

ReactDOM.render(<MainApp/>, document.getElementById('root'));

serviceWorker.unregister();