Increase dynamic switching local

src/components/GlobalHeader/RightContent.js

@@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { Spin, Tag, Menu, Icon, Dropdown, Avatar, Tooltip, Button } from 'antd';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
+import LocaleContext from '../../locale/localeContext';
 import NoticeIcon from '../NoticeIcon';
 import HeaderSearch from '../HeaderSearch';
 import styles from './index.less';
@@ -47,7 +48,6 @@ export default class GlobalHeaderRight extends PureComponent {
     } else {
       localStorage.setItem('locale', 'zh-CN');
     }
-    location.reload();
   };
 
   render() {
@@ -153,9 +153,21 @@ export default class GlobalHeaderRight extends PureComponent {
         ) : (
           <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
         )}
-        <Button size="small" onClick={this.changLang}>
-          <FormattedMessage id="navbar.lang" />
-        </Button>
+        <LocaleContext.Consumer>
+          {context => {
+            return (
+              <Button
+                size="small"
+                onClick={() => {
+                  this.changLang();
+                  context.changeLocal();
+                }}
+              >
+                <FormattedMessage id="navbar.lang" />
+              </Button>
+            );
+          }}
+        </LocaleContext.Consumer>
       </div>
     );
   }

src/locale/localeContext.js

+import React from 'react';
+import { addLocaleData, IntlProvider } from 'react-intl';
+import { LocaleProvider } from 'antd';
+import enLocale from './en-US';
+import cnLocale from './zh-CN';
+
+const Context = React.createContext();
+
+function getLang() {
+  if (window.localStorage && localStorage.getItem('locale')) {
+    return localStorage.getItem('locale');
+  }
+  return (navigator.language || navigator.browserLanguage).toLowerCase() === 'en-us'
+    ? 'en-US'
+    : 'zh-CN';
+}
+
+export class LocalComponent extends React.PureComponent {
+  state = {
+    locale: getLang(),
+  };
+
+  changeLocal = () => {
+    this.setState({
+      locale: getLang(),
+    });
+  };
+
+  render() {
+    const { children } = this.props;
+    const { locale } = this.state;
+    return (
+      <Context.Provider
+        value={{
+          appLocale: locale === 'zh-CN' ? cnLocale : enLocale,
+          changeLocal: this.changeLocal,
+        }}
+      >
+        <Context.Consumer>
+          {({ appLocale }) => {
+            addLocaleData(appLocale.data);
+            return (
+              <IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
+                <LocaleProvider locale={appLocale.antd}>{children}</LocaleProvider>
+              </IntlProvider>
+            );
+          }}
+        </Context.Consumer>
+      </Context.Provider>
+    );
+  }
+}
+export default Context;

src/router.js

 import React from 'react';
 import { routerRedux, Route, Switch } from 'dva/router';
-import { LocaleProvider, Spin } from 'antd';
+import { Spin } from 'antd';
 import dynamic from 'dva/dynamic';
-import { addLocaleData, IntlProvider } from 'react-intl';
+import { LocalComponent } from './locale/localeContext';
 import { getRouterData } from './common/router';
 import Authorized from './utils/Authorized';
 import { getQueryPath } from './utils/utils';
 import styles from './index.less';
-import enLocale from './locale/en-US';
-import cnLocale from './locale/zh-CN';
 
 const { ConnectedRouter } = routerRedux;
 const { AuthorizedRoute } = Authorized;
@@ -17,37 +15,25 @@ dynamic.setDefaultLoadingComponent(() => {
   return <Spin size="large" className={styles.globalSpin} />;
 });
 
-function getLang() {
-  if (window.localStorage && localStorage.getItem('locale')) {
-    return localStorage.getItem('locale');
-  }
-  return (navigator.language || navigator.browserLanguage).toLowerCase() === 'en-us'
-    ? 'en-US'
-    : 'zh-CN';
-}
-
 function RouterConfig({ history, app }) {
   const routerData = getRouterData(app);
   const UserLayout = routerData['/user'].component;
   const BasicLayout = routerData['/'].component;
-  const appLocale = getLang() === 'zh-CN' ? cnLocale : enLocale;
-  addLocaleData(appLocale.data);
+
   return (
-    <IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
-      <LocaleProvider locale={appLocale.antd}>
-        <ConnectedRouter history={history}>
-          <Switch>
-            <Route path="/user" component={UserLayout} />
-            <AuthorizedRoute
-              path="/"
-              render={props => <BasicLayout {...props} />}
-              authority={['admin', 'user']}
-              redirectPath="/user/login"
-            />
-          </Switch>
-        </ConnectedRouter>
-      </LocaleProvider>
-    </IntlProvider>
+    <LocalComponent>
+      <ConnectedRouter history={history}>
+        <Switch>
+          <Route path="/user" component={UserLayout} />
+          <AuthorizedRoute
+            path="/"
+            render={props => <BasicLayout {...props} />}
+            authority={['admin', 'user']}
+            redirectPath="/user/login"
+          />
+        </Switch>
+      </ConnectedRouter>
+    </LocalComponent>
   );
 }