From 7808f6630c801128576ed8ee3fd852a6f1ddaf5b Mon Sep 17 00:00:00 2001 From: WhatAKitty <104xuqiang@163.com> Date: Thu, 9 Nov 2017 18:27:17 +0800 Subject: [PATCH] Dynamic route --- src/common/nav.js | 170 ++++++++++++++++++++++++------------- src/layouts/BasicLayout.js | 6 +- src/layouts/UserLayout.js | 2 +- src/router.js | 14 ++- 4 files changed, 124 insertions(+), 68 deletions(-) diff --git a/src/common/nav.js b/src/common/nav.js index 4eb70cf5..3ae76be3 100644 --- a/src/common/nav.js +++ b/src/common/nav.js @@ -1,40 +1,10 @@ -import BasicLayout from '../layouts/BasicLayout'; -import UserLayout from '../layouts/UserLayout'; -import BlankLayout from '../layouts/BlankLayout'; - -import Analysis from '../routes/Dashboard/Analysis'; -import Monitor from '../routes/Dashboard/Monitor'; -import Workplace from '../routes/Dashboard/Workplace'; - -import TableList from '../routes/List/TableList'; -import CoverCardList from '../routes/List/CoverCardList'; -import CardList from '../routes/List/CardList'; -import FilterCardList from '../routes/List/FilterCardList'; -import SearchList from '../routes/List/SearchList'; -import BasicList from '../routes/List/BasicList'; - -import BasicProfile from '../routes/Profile/BasicProfile'; -import AdvancedProfile from '../routes/Profile/AdvancedProfile'; - -import BasicForm from '../routes/Forms/BasicForm'; -import AdvancedForm from '../routes/Forms/AdvancedForm'; -import StepForm from '../routes/Forms/StepForm'; -import Step2 from '../routes/Forms/StepForm/Step2'; -import Step3 from '../routes/Forms/StepForm/Step3'; - -import Exception403 from '../routes/Exception/403'; -import Exception404 from '../routes/Exception/404'; -import Exception500 from '../routes/Exception/500'; - -import Success from '../routes/Result/Success'; -import Error from '../routes/Result/Error'; - -import Login from '../routes/User/Login'; -import Register from '../routes/User/Register'; -import RegisterResult from '../routes/User/RegisterResult'; +import dynamic from 'dva/dynamic'; const data = [{ - component: BasicLayout, + component: app => dynamic({ + app, + component: () => import('../layouts/BasicLayout'), + }), layout: 'BasicLayout', name: '首页', // for breadcrumb path: '', @@ -45,15 +15,24 @@ const data = [{ children: [{ name: '分析页', path: 'analysis', - component: Analysis, + component: app => dynamic({ + app, + component: () => import('../routes/Dashboard/Analysis'), + }), }, { name: '监控页', path: 'monitor', - component: Monitor, + component: app => dynamic({ + app, + component: () => import('../routes/Dashboard/Monitor'), + }), }, { name: '工作台', path: 'workplace', - component: Workplace, + component: app => dynamic({ + app, + component: () => import('../routes/Dashboard/Workplace'), + }), }], }, { name: '表单页', @@ -62,22 +41,37 @@ const data = [{ children: [{ name: '基础表单', path: 'basic-form', - component: BasicForm, + component: app => dynamic({ + app, + component: () => import('../routes/Forms/BasicForm'), + }), }, { name: '分步表单', path: 'step-form', - component: StepForm, + component: app => dynamic({ + app, + component: () => import('../routes/Forms/StepForm'), + }), children: [{ path: 'confirm', - component: Step2, + component: app => dynamic({ + app, + component: () => import('../routes/Forms/StepForm/Step2'), + }), }, { path: 'result', - component: Step3, + component: app => dynamic({ + app, + component: () => import('../routes/Forms/StepForm/Step3'), + }), }], }, { name: '高级表单', path: 'advanced-form', - component: AdvancedForm, + component: app => dynamic({ + app, + component: () => import('../routes/Profile/AdvancedProfile'), + }), }], }, { name: '列表页', @@ -86,27 +80,45 @@ const data = [{ children: [{ name: '查询表格', path: 'table-list', - component: TableList, + component: app => dynamic({ + app, + component: () => import('../routes/List/TableList'), + }), }, { name: '标准列表', path: 'basic-list', - component: BasicList, + component: app => dynamic({ + app, + component: () => import('../routes/List/BasicList'), + }), }, { name: '卡片列表', path: 'card-list', - component: CardList, + component: app => dynamic({ + app, + component: () => import('../routes/List/CardList'), + }), }, { name: '搜索列表(项目)', path: 'cover-card-list', - component: CoverCardList, + component: app => dynamic({ + app, + component: () => import('../routes/List/CoverCardList'), + }), }, { name: '搜索列表(应用)', path: 'filter-card-list', - component: FilterCardList, + component: app => dynamic({ + app, + component: () => import('../routes/List/FilterCardList'), + }), }, { name: '搜索列表(文章)', path: 'search', - component: SearchList, + component: app => dynamic({ + app, + component: () => import('../routes/List/SearchList'), + }), }], }, { name: '详情页', @@ -115,11 +127,17 @@ const data = [{ children: [{ name: '基础详情页', path: 'basic', - component: BasicProfile, + component: app => dynamic({ + app, + component: () => import('../routes/Profile/BasicProfile'), + }), }, { name: '高级详情页', path: 'advanced', - component: AdvancedProfile, + component: app => dynamic({ + app, + component: () => import('../routes/Profile/AdvancedProfile'), + }), }], }, { name: '结果', @@ -128,11 +146,17 @@ const data = [{ children: [{ name: '成功', path: 'success', - component: Success, + component: app => dynamic({ + app, + component: () => import('../routes/Result/Success'), + }), }, { name: '失败', path: 'fail', - component: Error, + component: app => dynamic({ + app, + component: () => import('../routes/Result/Error'), + }), }], }, { name: '异常', @@ -141,19 +165,31 @@ const data = [{ children: [{ name: '403', path: '403', - component: Exception403, + component: app => dynamic({ + app, + component: () => import('../routes/Exception/403'), + }), }, { name: '404', path: '404', - component: Exception404, + component: app => dynamic({ + app, + component: () => import('../routes/Exception/404'), + }), }, { name: '500', path: '500', - component: Exception500, + component: app => dynamic({ + app, + component: () => import('../routes/Exception/500'), + }), }], }], }, { - component: UserLayout, + component: app => dynamic({ + app, + component: () => import('../layouts/UserLayout'), + }), layout: 'UserLayout', children: [{ name: '帐户', @@ -162,19 +198,31 @@ const data = [{ children: [{ name: '登录', path: 'login', - component: Login, + component: app => dynamic({ + app, + component: () => import('../routes/User/Login'), + }), }, { name: '注册', path: 'register', - component: Register, + component: app => dynamic({ + app, + component: () => import('../routes/User/Register'), + }), }, { name: '注册结果', path: 'register-result', - component: RegisterResult, + component: app => dynamic({ + app, + component: () => import('../routes/User/RegisterResult'), + }), }], }], }, { - component: BlankLayout, + component: app => dynamic({ + app, + component: () => import('../layouts/BlankLayout'), + }), layout: 'BlankLayout', children: { name: '使用文档', diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js index 47fd8782..37a45cc0 100644 --- a/src/layouts/BasicLayout.js +++ b/src/layouts/BasicLayout.js @@ -159,7 +159,7 @@ class BasicLayout extends React.PureComponent { > {icon}{item.name} - ) + ) } ); @@ -239,7 +239,7 @@ class BasicLayout extends React.PureComponent { } } render() { - const { currentUser, collapsed, fetchingNotices } = this.props; + const { app, currentUser, collapsed, fetchingNotices } = this.props; const menu = ( @@ -352,7 +352,7 @@ class BasicLayout extends React.PureComponent { exact={item.exact} key={item.path} path={item.path} - component={item.component} + component={item.component(app)} /> ) ) diff --git a/src/layouts/UserLayout.js b/src/layouts/UserLayout.js index 923983d0..c6212a56 100644 --- a/src/layouts/UserLayout.js +++ b/src/layouts/UserLayout.js @@ -59,7 +59,7 @@ class UserLayout extends React.PureComponent { exact={item.exact} key={item.path} path={item.path} - component={item.component} + component={item.component(this.props.app)} /> ) ) diff --git a/src/router.js b/src/router.js index cb53d6d1..2fd1aeaa 100644 --- a/src/router.js +++ b/src/router.js @@ -2,10 +2,18 @@ import React from 'react'; import { Router, Route, Switch } from 'dva/router'; import { LocaleProvider } from 'antd'; import zhCN from 'antd/lib/locale-provider/zh_CN'; -import BasicLayout from './layouts/BasicLayout'; -import UserLayout from './layouts/UserLayout'; +import dynamic from 'dva/dynamic'; + +function RouterConfig({ history, app }) { + const BasicLayout = dynamic({ + app, + component: () => import('./layouts/BasicLayout'), + }); + const UserLayout = dynamic({ + app, + component: () => import('./layouts/UserLayout'), + }); -function RouterConfig({ history }) { return ( -- GitLab