在使用mobx和react-router的过程中，发现了一些坑，记录如下。
Mobx版本：5.0.0
react-router-dom版本： 4.2.7。
示例代码是typescript，和ES6区别不大。
稍等，需要上代码吗？真的需要上代码吗？其实不需要的吧！
问题出在同时使用react-router的 @withRouter注解，和Mobx的@inject('store')注解时，会出现冲突的情况。表现为执行this.props.history.push('/')时，浏览器地址栏地址变了，但是页面没有跳转。
是什么原因呢？稍微深入了解React的同学应该知道，@inject 和@withRouter其实都是借助于React的context实现的。可以避免在使用多级组件时繁琐地传递props。当同时使用这两个注解时，可能会出现一些问题。
解决方案是什么呢？是一个注解顺序的问题，在同一个组件上，先用@inject，再用@withRouter就可以了。
也可以借助github的一个开源项目mobx-react-router避开这个问题，这时就无需使用@withRouter了。
具体例子见这里
网友评论