site: show locale in url, close: #3456

site/theme/template/Content/MainContent.jsx

@@ -84,7 +84,7 @@ export default class MainContent extends React.Component {
     const disabled = item.disabled;
     const url = item.filename.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').toLowerCase();
     const child = !item.link ?
-      <Link to={/^components/.test(url) ? `${url}/` : url} disabled={disabled}>
+      <Link to={{ query: this.props.location.query, pathname: /^components/.test(url) ? `${url}/` : url }} disabled={disabled}>
         {text}
       </Link> :
       <a href={item.link} target="_blank" rel="noopener noreferrer" disabled={disabled}>

site/theme/template/Home/Banner.jsx

@@ -16,7 +16,8 @@ function typeFunc(a) {
   return 'left';
 }
 
-export default function Banner() {
+export default function Banner({ location }) {
+  const query = location.query;
   return (
     <section id="banner">
       <ScrollElement scrollName="banner" className="page">
@@ -25,10 +26,10 @@ export default function Banner() {
           <p key="content"><FormattedMessage id="app.home.slogan" /></p>
           <span className="line" key="line" />
           <div key="button1" className="start-button clearfix">
-            <Link to="/docs/spec/introduce">
+            <Link to={{ query, pathname: '/docs/spec/introduce' }}>
               <FormattedMessage id="app.home.introduce" />
             </Link>
-            <Link to="/docs/react/introduce">
+            <Link to={{ query, pathname: '/docs/react/introduce' }}>
               <FormattedMessage id="app.home.start" />
             </Link>
           </div>

site/theme/template/Home/Page1.jsx

@@ -18,7 +18,7 @@ function onScrollEvent(e) {
   }
 }
 
-export default function Page1() {
+export default function Page1({ location }) {
   return (
     <ScrollOverPack scrollName="page1" className="content-wrapper page"
       playScale={1} replay scrollEvent={onScrollEvent}
@@ -32,7 +32,7 @@ export default function Page1() {
         <h2 key="h2"><FormattedMessage id="app.home.best-practice" /></h2>
         <p key="p" style={{ maxWidth: 310 }}><FormattedMessage id="app.home.experience" /></p>
         <div key="button">
-          <Link to="/docs/practice/cases">
+          <Link to={{ query: location.query, pathname: '/docs/practice/cases' }}>
             <Button type="primary" size="large">
               <FormattedMessage id="app.home.learn-more" />
               <Icon type="right" />

site/theme/template/Home/Page2.jsx

@@ -6,7 +6,7 @@ import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
 import { Icon, Button } from 'antd';
 import QueueAnim from 'rc-queue-anim';
 
-export default function Page2() {
+export default function Page2({ location }) {
   return (
     <ScrollOverPack scrollName="page2"
       className="content-wrapper page" playScale={1} replay
@@ -18,7 +18,7 @@ export default function Page2() {
         <h2 key="h2"><FormattedMessage id="app.home.design-pattern" /></h2>
         <p key="p" style={{ maxWidth: 260 }}><FormattedMessage id="app.home.pattern" /></p>
         <div key="button">
-          <Link to="/docs/pattern/navigation">
+          <Link to={{ query: location.query, pathname: '/docs/pattern/navigation' }}>
             <Button type="primary" size="large">
               <FormattedMessage id="app.home.learn-more" />
               <Icon type="right" />

site/theme/template/Home/Page3.jsx

@@ -6,7 +6,7 @@ import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
 import { Icon, Button } from 'antd';
 import QueueAnim from 'rc-queue-anim';
 
-export default function Page3() {
+export default function Page3({ location }) {
   return (
     <ScrollOverPack scrollName="page3" className="content-wrapper page" playScale={1} replay
       hideProps={{ image: { reverse: true } }}
@@ -21,7 +21,7 @@ export default function Page3() {
         <h2 key="h2"><FormattedMessage id="app.home.reusable-components" /></h2>
         <p key="p" style={{ maxWidth: 280 }}><FormattedMessage id="app.home.components-intro" /></p>
         <div key="button">
-          <Link to="/docs/react/introduce">
+          <Link to={{ query: location.query, pathname: '/docs/react/introduce' }}>
             <Button type="primary" size="large">
               <FormattedMessage id="app.home.learn-more" />
               <Icon type="right" />

site/theme/template/Home/index.jsx

@@ -92,11 +92,11 @@ function Home(props) {
     <DocumentTitle title={`Ant Design - ${props.intl.formatMessage({ id: 'app.home.slogan' })}`}>
       <div className="main-wrapper">
         <Link />
-        <Banner />
-        <Page1 />
-        <Page2 />
-        <Page3 />
-        <Page4 />
+        <Banner {...props} />
+        <Page1 {...props} />
+        <Page2 {...props} />
+        <Page3 {...props} />
+        <Page4 {...props} />
         <style dangerouslySetInnerHTML={{ __html: getStyle() }} />
       </div>
     </DocumentTitle>

site/theme/template/Layout/Header.jsx

@@ -62,7 +62,7 @@ export default class Header extends React.Component {
     if (typeof localStorage !== 'undefined') {
       const locale = this.context.intl.locale === 'zh-CN' ? 'en-US' : 'zh-CN';
       localStorage.setItem('locale', locale);
-      location.reload();
+      location.search = `?locale=${locale}`;
     }
   }
 
@@ -99,38 +99,39 @@ export default class Header extends React.Component {
     });
 
     const menuMode = this.state.menuMode;
+    const query = location.query;
     const menu = [
       <Button className="lang" type="ghost" size="small" onClick={this.handleLangChange} key="lang">
         <FormattedMessage id="app.header.lang" />
       </Button>,
       <Menu mode={menuMode} selectedKeys={[activeMenuItem]} id="nav" key="nav">
         <Menu.Item key="home">
-          <Link to="/">
+          <Link to={{ query, pathname: '/' }}>
             <FormattedMessage id="app.header.menu.home" />
           </Link>
         </Menu.Item>
         <Menu.Item key="docs/spec">
-          <Link to="/docs/spec/introduce">
+          <Link to={{ query, pathname: '/docs/spec/introduce' }}>
             <FormattedMessage id="app.header.menu.spec" />
           </Link>
         </Menu.Item>
         <Menu.Item key="docs/react">
-          <Link to="/docs/react/introduce">
+          <Link to={{ query, pathname: '/docs/react/introduce' }}>
             <FormattedMessage id="app.header.menu.components" />
           </Link>
         </Menu.Item>
         <Menu.Item key="docs/pattern">
-          <Link to="/docs/pattern/navigation">
+          <Link to={{ query, pathname: '/docs/pattern/navigation' }}>
             <FormattedMessage id="app.header.menu.pattern" />
           </Link>
         </Menu.Item>
         <Menu.Item key="docs/practice">
-          <Link to="/docs/practice/cases">
+          <Link to={{ query, pathname: '/docs/practice/cases' }}>
             <FormattedMessage id="app.header.menu.practice" />
           </Link>
         </Menu.Item>
         <Menu.Item key="docs/resource">
-          <Link to="/docs/resource/download">
+          <Link to={{ query, pathname: '/docs/resource/download' }}>
             <FormattedMessage id="app.header.menu.resource" />
           </Link>
         </Menu.Item>
@@ -153,7 +154,7 @@ export default class Header extends React.Component {
         </Popover>
         <Row>
           <Col lg={4} md={6} sm={7} xs={24}>
-            <Link to="/" id="logo">
+            <Link to={{ query, pathname: '/' }} id="logo">
               <img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
               <span>Ant Design</span>
             </Link>

site/theme/template/NotFound.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Link } from 'react-router';
 
-export default function NotFound() {
+export default function NotFound({ location }) {
   return (
     <div id="page-404">
       <section>
         <h1>404</h1>
-        <p>你要找的页面不存在 <Link to="/">返回首页</Link></p>
+        <p>你要找的页面不存在 <Link to={{ query: location.query, pathname: '/' }}>返回首页</Link></p>
       </section>
       <style
         dangerouslySetInnerHTML={{

site/theme/template/utils.jsx

@@ -20,6 +20,13 @@ export function getMenuItems(moduleData, locale) {
 }
 
 export function isZhCN() {
+  if (location.search.indexOf('locale=zh-CN') > -1) {
+    return true;
+  }
+  if (location.search.indexOf('locale=en-US') > -1) {
+    return false;
+  }
+
   const language = (
     typeof localStorage === 'undefined' ||
       !localStorage.getItem('locale')