Fix dynamic component remount ant-design#114 ant-design#150

WhatAKitty · Nov 14, 2017 · f039a58 · f039a58
1 parent 6783d92
commit f039a58
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 65 deletions.
diff --git a/src/common/nav.js b/src/common/nav.js
@@ -1,7 +1,7 @@
 import dynamic from 'dva/dynamic';
 
-const data = [{
-  component: app => dynamic({
+const data = app => [{
+  component: dynamic({
     app,
     models: () => [
       import('../models/user'),
@@ -18,7 +18,7 @@ const data = [{
     children: [{
       name: '分析页',
       path: 'analysis',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/chart'),
@@ -28,7 +28,7 @@ const data = [{
     }, {
       name: '监控页',
       path: 'monitor',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/monitor'),
@@ -38,7 +38,7 @@ const data = [{
     }, {
       name: '工作台',
       path: 'workplace',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/project'),
@@ -55,7 +55,7 @@ const data = [{
     children: [{
       name: '基础表单',
       path: 'basic-form',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/form'),
@@ -65,7 +65,7 @@ const data = [{
     }, {
       name: '分步表单',
       path: 'step-form',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/form'),
@@ -74,7 +74,7 @@ const data = [{
       }),
       children: [{
         path: 'confirm',
-        component: app => dynamic({
+        component: dynamic({
           app,
           models: () => [
             import('../models/form'),
@@ -83,7 +83,7 @@ const data = [{
         }),
       }, {
         path: 'result',
-        component: app => dynamic({
+        component: dynamic({
           app,
           models: () => [
             import('../models/form'),
@@ -94,7 +94,7 @@ const data = [{
     }, {
       name: '高级表单',
       path: 'advanced-form',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/form'),
@@ -109,7 +109,7 @@ const data = [{
     children: [{
       name: '查询表格',
       path: 'table-list',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/rule'),
@@ -119,7 +119,7 @@ const data = [{
     }, {
       name: '标准列表',
       path: 'basic-list',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/list'),
@@ -129,7 +129,7 @@ const data = [{
     }, {
       name: '卡片列表',
       path: 'card-list',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/list'),
@@ -139,7 +139,7 @@ const data = [{
     }, {
       name: '搜索列表（项目）',
       path: 'cover-card-list',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/list'),
@@ -149,7 +149,7 @@ const data = [{
     }, {
       name: '搜索列表（应用）',
       path: 'filter-card-list',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/list'),
@@ -159,7 +159,7 @@ const data = [{
     }, {
       name: '搜索列表（文章）',
       path: 'search',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/list'),
@@ -174,7 +174,7 @@ const data = [{
     children: [{
       name: '基础详情页',
       path: 'basic',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/profile'),
@@ -184,7 +184,7 @@ const data = [{
     }, {
       name: '高级详情页',
       path: 'advanced',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/profile'),
@@ -199,14 +199,14 @@ const data = [{
     children: [{
       name: '成功',
       path: 'success',
-      component: app => dynamic({
+      component: dynamic({
         app,
         component: () => import('../routes/Result/Success'),
       }),
     }, {
       name: '失败',
       path: 'fail',
-      component: app => dynamic({
+      component: dynamic({
         app,
         component: () => import('../routes/Result/Error'),
       }),
@@ -218,28 +218,28 @@ const data = [{
     children: [{
       name: '403',
       path: '403',
-      component: app => dynamic({
+      component: dynamic({
         app,
         component: () => import('../routes/Exception/403'),
       }),
     }, {
       name: '404',
       path: '404',
-      component: app => dynamic({
+      component: dynamic({
         app,
         component: () => import('../routes/Exception/404'),
       }),
     }, {
       name: '500',
       path: '500',
-      component: app => dynamic({
+      component: dynamic({
         app,
         component: () => import('../routes/Exception/500'),
       }),
     }],
   }],
 }, {
-  component: app => dynamic({
+  component: dynamic({
     app,
     component: () => import('../layouts/UserLayout'),
   }),
@@ -252,7 +252,7 @@ const data = [{
     children: [{
       name: '登录',
       path: 'login',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/login'),
@@ -262,7 +262,7 @@ const data = [{
     }, {
       name: '注册',
       path: 'register',
-      component: app => dynamic({
+      component: dynamic({
         app,
         models: () => [
           import('../models/register'),
@@ -272,14 +272,14 @@ const data = [{
     }, {
       name: '注册结果',
       path: 'register-result',
-      component: app => dynamic({
+      component: dynamic({
         app,
         component: () => import('../routes/User/RegisterResult'),
       }),
     }],
   }],
 }, {
-  component: app => dynamic({
+  component: dynamic({
     app,
     component: () => import('../layouts/BlankLayout'),
   }),
@@ -292,8 +292,6 @@ const data = [{
   },
 }];
 
-export function getNavData() {
-  return data;
+export function getNavData(app) {
+  return data(app);
 }
-
-export default data;
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
@@ -12,8 +12,6 @@ import styles from './BasicLayout.less';
 import HeaderSearch from '../components/HeaderSearch';
 import NoticeIcon from '../components/NoticeIcon';
 import GlobalFooter from '../components/GlobalFooter';
-import { getNavData } from '../common/nav';
-import { getRouteData } from '../utils/utils';
 
 const { Header, Sider, Content } = Layout;
 const { SubMenu } = Menu;
@@ -47,15 +45,15 @@ class BasicLayout extends React.PureComponent {
   constructor(props) {
     super(props);
     // 把一级 Layout 的 children 作为菜单项
-    this.menus = getNavData().reduce((arr, current) => arr.concat(current.children), []);
+    this.menus = props.navData.reduce((arr, current) => arr.concat(current.children), []);
     this.state = {
       openKeys: this.getDefaultCollapsedSubMenus(props),
     };
   }
   getChildContext() {
-    const { location } = this.props;
+    const { location, navData, getRouteData } = this.props;
     const routeData = getRouteData('BasicLayout');
-    const menuData = getNavData().reduce((arr, current) => arr.concat(current.children), []);
+    const menuData = navData.reduce((arr, current) => arr.concat(current.children), []);
     const breadcrumbNameMap = {};
     routeData.concat(menuData).forEach((item) => {
       breadcrumbNameMap[item.path] = item.name;
@@ -149,7 +147,7 @@ class BasicLayout extends React.PureComponent {
     });
   }
   getPageTitle() {
-    const { location } = this.props;
+    const { location, getRouteData } = this.props;
     const { pathname } = location;
     let title = 'Ant Design Pro';
     getRouteData('BasicLayout').forEach((item) => {
@@ -222,7 +220,7 @@ class BasicLayout extends React.PureComponent {
     }
   }
   render() {
-    const { app, currentUser, collapsed, fetchingNotices } = this.props;
+    const { currentUser, collapsed, fetchingNotices, getRouteData } = this.props;
 
     const menu = (
       <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
@@ -335,7 +333,7 @@ class BasicLayout extends React.PureComponent {
                       exact={item.exact}
                       key={item.path}
                       path={item.path}
-                      component={item.component(app)}
+                      component={item.component}
                     />
                   )
                 )

diff --git a/src/router.js b/src/router.js
@@ -2,27 +2,53 @@ import React from 'react';
 import { Router, Route, Switch, Redirect } from 'dva/router';
 import { LocaleProvider } from 'antd';
 import zhCN from 'antd/lib/locale-provider/zh_CN';
-import dynamic from 'dva/dynamic';
+import cloneDeep from 'lodash/cloneDeep';
+import { getNavData } from './common/nav';
+import { getPlainNode } from './utils/utils';
+
+function getRouteData(navData, path) {
+  if (!navData.some(item => item.layout === path) ||
+    !(navData.filter(item => item.layout === path)[0].children)) {
+    return null;
+  }
+  const route = cloneDeep(navData.filter(item => item.layout === path)[0]);
+  const nodeList = getPlainNode(route.children);
+  return nodeList;
+}
+
+function getLayout(navData, path) {
+  if (!navData.some(item => item.layout === path) ||
+    !(navData.filter(item => item.layout === path)[0].children)) {
+    return null;
+  }
+  const route = navData.filter(item => item.layout === path)[0];
+  return {
+    component: route.component,
+    layout: route.layout,
+    name: route.name,
+    path: route.path,
+  };
+}
 
 function RouterConfig({ history, app }) {
-  const BasicLayout = dynamic({
-    app,
-    models: () => [
-      import('./models/user'),
-    ],
-    component: () => import('./layouts/BasicLayout'),
-  });
-  const UserLayout = dynamic({
+  const navData = getNavData(app);
+  const UserLayout = getLayout(navData, 'UserLayout').component;
+  const BasicLayout = getLayout(navData, 'BasicLayout').component;
+
+  const passProps = {
     app,
-    component: () => import('./layouts/UserLayout'),
-  });
+    navData,
+    getRouteData: (path) => {
+      return getRouteData(navData, path);
+    },
+  };
 
   return (
     <LocaleProvider locale={zhCN}>
       <Router history={history}>
         <Switch>
-          <Route path="/user" render={props => <UserLayout {...props} app={app} />} />
-          <Route path="/" render={props => <BasicLayout {...props} app={app} />} />
+          <Route path="/user" render={props => <UserLayout {...props} {...passProps} />} />
+          <Route path="/" render={props => <BasicLayout {...props} {...passProps} />} />
           <Redirect to="/" />
         </Switch>
       </Router>