使用 dva 如何配置異步加載路由組件

來源：https://www.jianshu.com/p/69694013e36b
-----------------------------------------------------

普通方式 文件目錄：src/route.js

import React from 'react' import { Router, Route, Switch } from 'dva/router' import IndexPage from './routes/IndexPage'; import Category from './routes/Category'; function RouterConfig({ history, app }) { return ( <Router history={history}> <Switch> <Route path="/" exact component={IndexPage} /> <Route path="/category" exact component={Category} /> </Switch> </Router> ) } export default RouterConfig 

1. 使用異步路由加載組件 在文件頭部引入

import dynamic from 'dva/dynamic' 

而後刪除如下代碼

import IndexPage from './routes/IndexPage'; import Category from './routes/Category'; 

在RouteConfig函數中添加如下代碼便可

const CompontentPage = dynamic({ component: () => import('./routes/CompontentPage') }) const CompontentPage1 = dynamic({ component: () => import('./routes/CompontentPage1') }) 

完整實例

import React from 'react' import { Router, Route, Switch } from 'dva/router' import dynamic from 'dva/dynamic' function RouterConfig({ history, app }) { const IndexPage = dynamic({ app, component: () => import('./routes/IndexPage') }) const Category = dynamic({ app, component: () => import('./routes/Category') }) return ( <Router history={history}> <Switch> <Route path="/" exact component={IndexPage} /> <Route path="/category" exact component={Category} /> </Switch> </Router> ) } export default RouterConfig 

很簡單把~~