update router to a component.

xuqiang1227 · Sep 26, 2017 · e1ec66e · e1ec66e
1 parent 68a9ee9
commit e1ec66e
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 54 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/>;