在使用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
了。
具体例子见这里