dva框架下react15升级到react16总结

升级目标：

react和react-dom版本从15.4.2 => 16.8.0  

dva版本从1.2.1 => 2.1.0(内置react-router2 => react-router4)

其实react升级基本只更新一下包就可以了，主要是react-router升到4有很大的破坏性改动

### 升级总结 ###

1. react-router4不能嵌套<route>,现在路由配置由一般会由原先的一个文件（router.js）的基础上又拆分到多个文件

2. 新增跳转标签<NavLink>,activeClassName只能用在NavLink上面

3. 跳转的参数传递和解析

   - query不是react-router4原生属性，不会显示在地址栏，但<link>的自定义属性还是会写到location属性里，但是刷新页面会丢失，所以正常情况还是直接拼在URL上,参数很多的情况可以用state传参（但是用新tab打开时，state属性会丢失）

   - this.context.router.push 改成 this.context.router.history.push(未来版本中有可能被抛弃)

   - 推荐直接用this.props.history.push({ pathname: '/' }, search: '?some=search-string', state: { })

   - 如果URL参数直接写到pathname上，当只改变参数页面不会自动刷新，需要在componentwillreceiveprops里面做判断然后是否重新获取数据之类，或者直接使用state

   - 以前通过location.query能拿到类似{ param: val }对象；现在只能通过location.search拿到类似 ?param=val 的字符自己解析参数

   - 解析动态路由参数：this.props.params改成this.props.match.params；还可以用useParams()

4. redux里namespace routing里locationBeforeTransitions换成了location;

5. 在非组件文件引用样式不生效

基本route结构如下
import { routerRedux, Route, Switch  } from 'dva/router';
const { ConnectedRouter } = routerRedux;
      
<ConnectedRouter history={history}>
   <Switch>
      <Route exact path="/" component={Login} />
      <Route path="/login" component={Login} />
      <Route path="/webConsole" component={WebConsole} />
      <Route path="/monitorChart" component={MonitorChartWrapper} />
      <Route path="/*" component={ConsoleFrameWrapper} />
   </Switch>
</ConnectedRouter>

react-router4 API : https://reacttraining.com/react-router/web/api/history