From e1ec66eb63080cf9023ed9bf0bde38d2defca6cc Mon Sep 17 00:00:00 2001
From: xuqiang <xuqiang@wafersystems.com>
Date: Tue, 26 Sep 2017 14:07:44 +0800
Subject: [PATCH] update router to a component.

---
 README.md               | 62 +++++++++++++++++------------------------
 src/router.js           | 49 +++++++++++++++++++++++++-------
 src/routes/Example.js   |  3 +-
 src/routes/IndexPage.js |  2 --
 src/routes/Layout.js    |  3 +-
 src/routes/Test.js      |  3 +-
 6 files changed, 68 insertions(+), 54 deletions(-)

diff --git a/README.md b/README.md
index 4d5d10c..2f41b82 100644
--- a/README.md
+++ b/README.md
@@ -82,50 +82,40 @@ npm run dist
     import React from 'react';
     import {Router, Route, Switch} from 'dva/router';
     import dynamic from 'dva/dynamic';
+    import App from './routes/App';
+    import Layout from './routes/Layout';
     
     export default ({history, app}) => {
-    
       const ExampleIndex = dynamic({
         app,
-        component: () => import('./routes/Example'),
-        models: () => [import('./models/layout')]
+        component: () => import('./routes/Example')
+      });
+      const TestIndex = dynamic({
+        app,
+        component: () => import('./routes/Test')
       });
-    
-      return <Router history={history}>
-          <Switch>
-            <Route exact path={'/'} component={dynamic({app, component: () => import('./routes/IndexPage')})}/>
-            <Route exact path={'/main/example'}
-                   component={ExampleIndex}/>
-          </Switch>
-      </Router>;
-    };
-    
-    如果是公共model，可以放到index.js中。
-### 4. 将原来的Layout 修改如下：
-    
-    import React from 'react';
-    import { connect } from 'dva';
-    import Layout from '../components/layout/Main';
-    import {injectIntl} from 'react-intl';
-    import App from './App';
-    
-    const Main = injectIntl(({routes, dispatch, children, layout, intl}) => {
       return (
-        <Layout routes={routes} dispatch={dispatch} layout={layout} intl={intl}>
-          {children}
-        </Layout>
+        <App>
+          <Router history={history}>
+            <Switch>
+              <Route exact path={'/'} component={dynamic({app, component: () => import('./routes/IndexPage')})}/>
+              <Layout>
+                <Route exact path={'/main/example'}
+                       render={() => <ExampleIndex breadcrumbName={'layout.index'}/>}/>
+                <Route exact path={'/main/test'} component={TestIndex}/>
+              </Layout>
+            </Switch>
+          </Router>
+        </App>
       );
-    });
+    }
     
-    export default connect(state => state)(props => <App><Main {...props}/></App>);
+    如果是公共model，可以放到index.js中。
     
-    修改这一步的目的是，将Layout组件和IntlProvide组件从Route中抽取出来，避免由Layout包裹的路由出现无法跳转的问题。
-    也可以通过router@4提供的其他方式实现wrap.
-### 5. 每个routerIndex用layout 包裹起来
-
-    export default () => <Layout><Example/></Layout>;
+   [migration](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md)
     
-### 6. Breadcrumb修改
+### 4. Breadcrumb修改
 
-    router@4不再提供routes参数，因此Breadcrumb需要自己手动实现。
-    参考[Breadcrumb](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router-4)
+   router@4不再提供routes参数，因此Breadcrumb需要自己手动实现。
+  
+   参考[Breadcrumb](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router-4)
diff --git a/src/router.js b/src/router.js
index 426fbd0..7a7d0ac 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import {Router, Route, Switch} from 'dva/router';
 import dynamic from 'dva/dynamic';
+import App from './routes/App';
+import Layout from './routes/Layout';
 
 export default ({history, app}) => {
-
   const ExampleIndex = dynamic({
     app,
     component: () => import('./routes/Example')
@@ -12,13 +13,41 @@ export default ({history, app}) => {
     app,
     component: () => import('./routes/Test')
   });
+  return (
+    <App>
+      <Router history={history}>
+        <Switch>
+          <Route exact path={'/'} component={dynamic({app, component: () => import('./routes/IndexPage')})}/>
+          <Layout>
+            <Route exact path={'/main/example'}
+                   render={() => <ExampleIndex breadcrumbName={'layout.index'}/>}/>
+            <Route exact path={'/main/test'} component={TestIndex}/>
+          </Layout>
+        </Switch>
+      </Router>
+    </App>
+  );
+}
 
-  return <Router history={history}>
-      <Switch>
-        <Route exact path={'/'} component={dynamic({app, component: () => import('./routes/IndexPage')})}/>
-        <Route exact path={'/main/example'}
-               render={() => <ExampleIndex breadcrumbName={'layout.index'}/>}/>
-        <Route exact path={'/main/test'} component={TestIndex}/>
-      </Switch>
-  </Router>;
-};
+// This approach causes the entire page to be refreshed, so deprecated.
+//
+// export default ({history, app}) => {
+//
+//   const ExampleIndex = dynamic({
+//     app,
+//     component: () => import('./routes/Example')
+//   });
+//   const TestIndex = dynamic({
+//     app,
+//     component: () => import('./routes/Test')
+//   });
+//
+//   return <Router history={history}>
+//       <Switch>
+//         <Route exact path={'/'} component={dynamic({app, component: () => import('./routes/IndexPage')})}/>
+//         <Route exact path={'/main/example'}
+//                render={() => <ExampleIndex breadcrumbName={'layout.index'}/>}/>
+//         <Route exact path={'/main/test'} component={TestIndex}/>
+//       </Switch>
+//   </Router>;
+// };
diff --git a/src/routes/Example.js b/src/routes/Example.js
index b8be5ba..57d4f16 100644
--- a/src/routes/Example.js
+++ b/src/routes/Example.js
@@ -1,5 +1,4 @@
 import React from 'react';
 import Example from '../components/Example';
-import Layout from './Layout';
 
-export default () => <Layout><Example/></Layout>;
+export default () => <Example/>;
diff --git a/src/routes/IndexPage.js b/src/routes/IndexPage.js
index 0a5fa3d..fd5d5fb 100644
--- a/src/routes/IndexPage.js
+++ b/src/routes/IndexPage.js
@@ -11,7 +11,6 @@ import App from './App';
 const IndexPage = ({form, dispatch}) => {
   const {getFieldDecorator, validateFields} = form;
   return (
-    <App>
       <div className={styles.normal}>
         <div className={styles.login}>
           <div className={styles.title}>Dva Initial</div>
@@ -56,7 +55,6 @@ const IndexPage = ({form, dispatch}) => {
           </div>
         </div>
       </div>
-    </App>
   );
 };
 
diff --git a/src/routes/Layout.js b/src/routes/Layout.js
index 0cf0464..a3fb916 100644
--- a/src/routes/Layout.js
+++ b/src/routes/Layout.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { connect } from 'dva';
 import Layout from '../components/layout/Main';
 import {injectIntl} from 'react-intl';
-import App from './App';
 
 const Main = injectIntl((props) => {
   const {dispatch, children, layout, intl} = props;
@@ -13,4 +12,4 @@ const Main = injectIntl((props) => {
   );
 });
 
-export default connect(state => state)(props => <App><Main {...props}/></App>);
+export default connect(state => state)(props => <Main {...props}/>);
diff --git a/src/routes/Test.js b/src/routes/Test.js
index d51f523..f74349b 100644
--- a/src/routes/Test.js
+++ b/src/routes/Test.js
@@ -1,5 +1,4 @@
 import React from 'react';
 import Test from '../components/Test';
-import Layout from './Layout';
 
-export default () => <Layout><Test/></Layout>;
+export default () => <Test/>;