我胡汉三有日子没回来写写文章了, 最近一直再忙着将老项目升级, 所以没时间来搞文章, 今天突然感觉开了挂一样, 爱因斯坦附体, 把之前的 bug 都搞定了, 在这里特意把升级中遇到的问题, 记录下来, 算是把这个坑填上.
场景: react-router2.2.4 ---> 5.0.1
主要发生了两个问题:
1. 路由跳转之前用了 browserHistory.push() 抛错: Cannot read property 'push' of undefined
2.react-router 中的 Link 组件 抛错: type is invalid
问题一的解决与思考:
解决方案: 使用 this.props.history.push()
出现原因: react-router5.0.1 已经不存在 browserHistory 这个对象
解决思路: 1. 当抛出错误后, 打了 debugger, 结果: 发现 browserHistory 是 undefined
2. 将 import {browserHistory} from 'react-router' 改为 import * as Rtest from 'react-router', 并在后面打印出 Rtest, 结果: 发现 Rtest 中并没有 browserHistory 对象
在此已经怀疑是版本问题, 因为给 react-router 升级到了 5.0.1
3. 翻看之前的版本 (2.2.4), 发现存在 browserHistory, 确定问题: 问题为 react-router 版本升级导致之前的写法出现错误
问题二的解决与思考
解决方案: 从 react-router-dom 中引入, inport {Link} from 'react-router-dom'
出现原因: Link 组件被从 react-router 移动到了 react-router-dom 中
解决思路: 1. 找到 Link 组件, 发现 Link 组件的使用没问题, 看了抛错, 结果: Link 组件不存在
2. 本想直接删除掉 Link 组件, 自己手动实现一个, 后查了一下发现 Link 组件被移入了 react-router-dom 中.
总结: 看了一下, react-router 后来的版本和之前的版本区别还是蛮大的, 升级的话, 基本上大部分地方都需要动一动, 但是改起来还是很便捷的.
好了, 今天就记录到这. 我胡汉三看文档去了, 告辞!
来源: https://www.cnblogs.com/suihang/p/11450505.html