dva router4.0 使用实践总结

一、概述

dva 升级到 2.0 版本以后，也将内部使用的 dva/router 从 [email protected] 升级到了 [email protected]。[email protected] 文档 API

[email protected] 让路由变得更简单，最大特点就是可以路由嵌套，可是如果照搬使用 [email protected] 的写法，你会发现在 dva 中是行不通的，查看 dva/router 的源码可以看到：

// dva/router.js
module.exports = require('react-router-dom');
module.exports.routerRedux = require('react-router-redux');

其中第一行导出的 react-router-dom 就是 [email protected] 文件，第二行导出的 react-router-redux 是 react-router 配合 redux 使用的中间库。因为 dva 中使用到了 redux，所以我们在配置的时候还需要注意到这一点。

由于 dva 将 react-router-dom 和 react-router-redux 都封装到了 dva/router 中，在使用 [email protected] 和 redux 里面的东西时只需引入 dva/router 这个包即可。

二、dva 中使用 router4.0

router.js

import React from 'react';
import { routerRedux, Route } from 'dva/router';
import Example from 'routes/Example';

const { ConnectedRouter } = routerRedux;

function RouterConfig({ history, app }) {

    return (
        
          
        
    );

}

export default RouterConfig;

说明：

Route 为 react-router-dom 内的标签
ConnectedRouter 为 react-router-redux 内的对象 routerRedux 的标签，作用相当于 react-router-dom 中的 BrowserRouter 标签，作用为连接 redux 使用。

三、`[email protected]` 常用标签总结

英文不错的建议直接去官网读一手文档，对于理解很有帮助。
[email protected] 文档 API

以下内容仅为作者在阅读时总结的内容。

1. BrowerRouter


 // 渲染为

2. Route

route 的三种写法
route 传给组件的参数
- match 跟爸爸有关
  - isExact 是否完全匹配
  - params 参数，一般指path中的参数
  - path 中 path 属性的值，与浏览器地址栏 url 进行匹配，“/topics/:topicId”
  - url Link 或者 a 标签中跳转的地址，一般情况下为浏览器地址栏中地址，如果有 basename，浏览器地址栏为 basename + url 的值，“/topics/components”
- location 跟自己有关
  - pathname 与 match 中的 url 属性相同，“/topics/components”
  - hash: "" 不知所云，换成 hashHistory 也没有值
  - key: "" 随机生成一个6位的字符串，唯一喔
  - search: "" 参数
- history
  - -history对象，可以通过代码控制前进、后退
属性
- path 匹配的路径 “/topics/:topicId”
- exact 完全匹配
- strict 结尾斜线匹配