React + Mobx + react-router 页面未跳转

在使用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其实都是借助于Reactcontext实现的。可以避免在使用多级组件时繁琐地传递props。当同时使用这两个注解时,可能会出现一些问题。

解决方案是什么呢?是一个注解顺序的问题,在同一个组件上,先用@inject,再用@withRouter就可以了。
也可以借助github的一个开源项目mobx-react-router避开这个问题,这时就无需使用@withRouter了。
具体例子见这里

你可能感兴趣的:(React + Mobx + react-router 页面未跳转)