dva-组件动态加载

在路由router里面，每一个<Route>标签内的component属性可以是dynamic({xxx})返回的对象。

import React from 'react'
import { Router, Route, Switch } from 'dva/router'
import dynamic from 'dva/dynamic'

function RouterConfig({ history, app }) {
    const IndexPage = dynamic({
        app,
        models:()=>[import('./models/IndexPage'),],
        component: () => import('./routes/IndexPage')
    })
    const Category = dynamic({
        app,
        models:()=>[import('./models/IndexPage'),]
        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

然后直接把路由挂在dva生成的app对象下就好了

import 'babel-polyfill'
import dva from 'dva'
import { createHashHistory as createHistory } from 'history'
import { message } from 'antd'
import model from './models'
import RouterConfig from './routes'

// 1. Initialize
const app = dva({
    history: createHistory(),
    onError(err) {
        message.error(err.message)
    },
});

// 2. Plugins
// app.use({});

// 3. Model
app.model(model);

// 4. Router
app.router(RouterConfig);

// 5. Start
app.start('#root');