Update doc with dynamic router support

docs/layout.en-US.md

@@ -55,29 +55,31 @@ We abstract common layouts in Ant Design Pro, and put them in `/layouts`, includ
 To manage mappings between routes and pages, we put configurations under `common/nav.js` as follows:
 
 ```jsx
-const data = [{
-  component: BasicLayout,
-  name: 'Home',  // for breadcrumb
+export const getNavData = app => [{
+  component: dynamicWrapper(app, ['user'], import('../layouts/BasicLayout')),   // for dynamic import
+  name: '首页',  // for breadcrumb
   path: '',
   children: [{...}],
 }, {
-  component: UserLayout,
+  component: dynamicWrapper(app, [], import('../layouts/UserLayout')),
   children: [{
-    name: 'User',
+    name: '帐户',
     icon: 'user',
     path: 'user',
     children: [{
-      name: 'Login',
+      name: '登录',
       path: 'login',
-      component: Login,
+      component: dynamicWrapper(app, ['login'], import('../routes/User/Login')),
     }, {
-      name: 'Register',
+      name: '注册',
       path: 'register',
-      component: Register,
+      component: dynamic({
+        app,
+        models: dynamicWrapper(app, ['register'], import('../routes/User/Register')),
     }, {
-      name: 'Register Result',
+      name: '注册结果',
       path: 'register-result',
-      component: RegisterResult,
+      component: dynamicWrapper(app, [], import('../routes/User/RegisterResult')),
     }],
   }],
 }];

docs/layout.zh-CN.md

@@ -50,32 +50,34 @@ React.Children.forEach(children, function[(thisArg)])
 
 ### 如何使用 Ant Design Pro 布局
 
-我们为了统一方便的管理路由和页面的关系，将配置信息统一抽离到 `common/nav.js` 下，通过如下配置：
+我们为了统一方便的管理路由和页面的关系，将配置信息统一抽离到 `common/nav.js` 下，同时应用动态路由，通过如下配置：
 
 ```jsx
-const data = [{
-  component: BasicLayout,
+export const getNavData = app => [{
+  component: dynamicWrapper(app, ['user'], import('../layouts/BasicLayout')),   // for dynamic import
   name: '首页',  // for breadcrumb
   path: '',
   children: [{...}],
 }, {
-  component: UserLayout,
+  component: dynamicWrapper(app, [], import('../layouts/UserLayout')),
   children: [{
     name: '帐户',
     icon: 'user',
     path: 'user',
     children: [{
       name: '登录',
       path: 'login',
-      component: Login,
+      component: dynamicWrapper(app, ['login'], import('../routes/User/Login')),
     }, {
       name: '注册',
       path: 'register',
-      component: Register,
+      component: dynamic({
+        app,
+        models: dynamicWrapper(app, ['register'], import('../routes/User/Register')),
     }, {
       name: '注册结果',
       path: 'register-result',
-      component: RegisterResult,
+      component: dynamicWrapper(app, [], import('../routes/User/RegisterResult')),
     }],
   }],
 }];

docs/router-and-nav.md

@@ -49,7 +49,7 @@ type: 入门
   name: '新页面',             // 页面名称，会展示在菜单栏中
   path: 'new',               // 匹配的路由
   icon: 'file',              // 页面图标，会展示在菜单栏中
-  component: NewPage,        // 页面对应的组件，记得在页头引入 `import NewPage from '../routes/NewPage';`
+  component: dynamicWrapper(app, ['NewPageModel'], import('/path/to/NewPage')),   // 动态引入NewPage页面和所需的Models
 }
 ```
 
@@ -61,7 +61,7 @@ type: 入门
 
 ```js
 {
-  component: NewLayout,       // 新建的模板
+  component: dynamicWrapper(app, [], import('/path/to/NewLayout')),     // 新建的模板，使用`dynamic`动态引入
   layout: 'NewLayout',        // 标记，生成路由时会用到
   children: [{
     name: '新布局',            // 新布局下的页面都可以放到这里
@@ -70,7 +70,7 @@ type: 入门
     children: [{
       name: '新页面',
       path: 'new-page',
-      component: NewPage,
+      component: dynamicWrapper(app, ['NewPageModel'], import('/path/to/NewPage')),
     }],
   }],
 }
@@ -86,7 +86,7 @@ type: 入门
         exact={item.exact}
         key={item.path}
         path={item.path}
-        component={item.component}
+        component={item.component}      // dynamic import
       />
     )
   )
@@ -113,14 +113,14 @@ type: 入门
   children: [{
     name: '基础详情页',
     path: 'basic',
-    component: BasicProfile,
+    component: dynamicWrapper(app, ['profile'], import('../routes/Profile/BasicProfile')),
   }, {
     name: '高级详情页',
     path: 'advanced',
     children: [{
       name: '高级详情页',
       path: ':id',                      // id 为参数名
-      component: AdvancedProfile,
+      component: dynamicWrapper(app, ['profile'], import('../routes/Profile/AdvancedProfile')),
     }]
   }],
 }
@@ -139,9 +139,9 @@ type: 入门
 
 ```js
 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;