升级目标:
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