React最佳实践系列 —— Dva 进阶之路由和动态加载

作者： DocWhite白先生

一. 路由

1. 基本使用

这里先不谈论react-router中的 HashRouter或是 BrowserRouter，有兴趣深入了解React-Router的同学可以去看看它的官方文档和H5的history API。
直接以最简单暴力的方式结束在dva框架中，通过路由实现多页面的效果。

（1）最基本的使用

在 dva-cli创建的dva项目的 src目录中有一个router.js文件，从src/index.js文件中可以看出，从这里可以注册 dva 应用的路由规则以及与其对应的路由组件。同时注意看index.js文件， dva使用的model默认情况是需要在src/index.js中注册，这两点很关键。
所以假设我们需要完成多个页面，则每个页面的路由规则和路由组件都必须要在这个src/router.js文件中注册。下面就是最常用的一种使用方式。

经常使用这种写法的同学一定知道这种写法在页面比较多的时候写起来有点繁琐，同时页面所需要的model需要单独在 src/index.js中引入。一旦web应用里面的页面变多以及其引用的model变多，将导致 src/index.js 和 router.js需要重复很多无用代码。
当然聪明的同学肯定相当了，router.js里面的路由注册实际上可以通过数组形式遍历输出Route组件，只需要维护存储路由信息的数组即可，如下：

这样就可以把 routes 数组单独拆分出去用一个配置文件存储，而router.js文件只需要引入这个配置文件即可。简化了很多代码。

到这一步，肯定有同学想到，这依然没有解决model的注册问题。
所以dva官方提供了路由页面和model的动态加载方法。

2. 动态加载

在使用动态加载路由和model之前，要引入 dva提供的dynamic方法，该方法用于动态的注册路由组件和model。
但需要切记的是，该写法会导致项目打包时候产生多个js文件对应不同的页面，通常名字为1.async.js, 2.async.js 等等。

利用dva/dynamic方法即可动态的加载路由组件以及其对应的model，这样我们只需要在增加页面的时候维护routes数组即可。
在这里面，dynamic方法对于routes元素的配置项有一个隐藏接口，可以给每一个路由配置LoadingComponent，配置完成之后，在该路由组件没有加载完成前会显示该loading组件。

...
{
      name: 'xxx',
      path: '/xxx',
      LoadingComponent: Loading,
      component: () => import('./routes/xxx')
}
...

3. 路由的组件的高阶用法

React-Router官方文档。

（1）Route

代码习惯好的同学，在开始使用第三方组件或库的时候一定会养成看文档的习惯，这个习惯能帮助你快速掌握第三方组件和库的使用，这里只简单的使用Route组件的例子。
有兴趣翻看路由组件React-Router官方文档的同学会发现Route组件暴露出来的接口有：

• path：路径
• exact：是否完全匹配路径才渲染
• component: path 对应的组件
• render： 自定义渲染
• children：不管路径是否匹配都要渲染
• strict：路由匹配的严格模式
• sensitive：是否对path的大小写敏感

光看文档中跑出来的接口或者说React组件的props，就有3中渲染方法，component、render、children。大多数人可能只会用component，这没问题，但是某些情况，我们想让特定的一组页面有一样的Layout或者给这些页面组件调用的时候注入props，使用component属性就是不能实现的，因为component接受的是一个React组件类。

所以这时候render方法给了我们一个非常好的实现方案， 就以为特定路由页面增加指定Layout为例：

这就是使用render方法去自定义页面组件渲染规则的妙用，同时由于render方法会接收要被传入页面组件的props，所以这里实际上还可以进行props拦截，替换，当然大部分情况下不需要这么复杂的操作。
而关于children属性的使用，请查看官方文档，这里就不做过多赘述。

二. 无需路由的情景

由于dva框架默认就集成了React-Router中的 HashRouter，但是在某些特定情况（如嵌入式开发，被嵌入的系统已经使用了别的框架的HashRouter，判断方法，看url在某个uri后面是否跟着 /#/ 或 #/ ），使用路由会导致被嵌入的系统无法正常工作，所以我们需要剥离掉dva默认集成的React-Router或者改为BrowserRouter。

• 无路由
  这种情况我们需要安装 dva-no-router这个库。并且在/src/index.js中将 dva的引入改为 dva-no-router。同时src/router.js 中不再需要使用React-Router组件，只需要返回一个React页面组件即可。
  
  

• 改用BrowserRouter
  改用BrowserRouter只需要给dva对象配置history，值为history中 createBrowserHistory函数的执行结果。