从零开始的dva框架学习---2

序言

上一篇讲了dva的主要作用和解决的什么问题以及入口文件index.js，那么这章主要来讨论主路由的配置以及如何实现路由的动态加载。

入口文件 /src/index.js.
从零开始的dva框架学习---2
/src/router.js 看下主路由中包含什么

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic';
import IndexPage from './routes/IndexPage';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

这里引入了dva/router，前面章节说过，dva实际是react+react-router+redux+redux-saga+fetch的整合，所以这里的router实际上就是react-router，dva/dynamic，官方文档是这样介绍dynamic解决组件动态加载问题的 util 方法。

什么是动态路由

这里我想初学者可能会存在这种疑惑，说到这里，首先回忆下一般路由的写法，例如上述代码，先用import关键字引入IndexPage组件，再把IndexPage赋值给Route组件的component属性，这里还有一种写法是

<Route path="/" exact render={ prop => <IndexPage {...prop} /> } />

设想一下，如果我们的菜单有很多的话，那么按照当前的模式，页面初次加载时需要用import将页面组件一个个引入进来，这样的话会对性能产生很大的损耗，有没有一种方法像异步那样等需要加载某个页面时再将组件引入进来呢？dva的dynamic方法就是为了解决这个问题，再刚刚代码基础上修改

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic';
// import IndexPage from './routes/IndexPage';



function RouterConfig({ history, app }) {
  const IndexPage = dynamic({
   app,
   component: () => import('./routes/IndexPage')
  });
  return (
    <Router history={history}>
      <Switch>
      <Route path="/" exact component={IndexPage} />} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

这里dynamic接受一个对象，第一个参数为app实例，由入口文件传入，component接受一个函数,这里同样使用import，不同的是import方法返回的是一个promise，并没有在一开始就将组件加载，所以这里在入口文件通常会需要使用app.use()将异步等待显示的页面组件传进来，另外除了app和component外还接受一个model，这个算是dva很重要的一个概念，下一章着重来说。

不积跬步无以至千里，不积小流无以成江海，每天进步一点点，梦想终将实现。