前端项目升级到React-router5中遇到的问题解决方案以及思路

我胡汉三有日子没回来写写文章了，最近一直再忙着将老项目升级，所以没时间来搞文章，今天突然感觉开了挂一样，爱因斯坦附体，把之前的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后来的版本和之前的版本区别还是蛮大的，升级的话，基本上大部分地方都需要动一动，但是改起来还是很便捷的。

好了，今天就记录到这。我胡汉三看文档去了，告辞！