React Router为何在url相同参数不同的情况下跳转但是并不刷新页面？

Question

用的是react router 4.0
代码如下

<Route exact path="/" component={Index} />
<Route path="/detail:skuId" component={Detail} />

我有个商品详情页面，url是/detail:235，这个页面中有个“猜你喜欢”模块，:后面跟的是每个商品的skuId号码，点击其中某个商品图标后仍然要跳转到/detail下，只是后面跟的skuId变了。现在的问题是，点击后只是看到地址栏后面跟的skuId确实变了，但是页面并没有刷新或者跳转，仍然处于之前的商品页面，请教大家如何解决？

我估摸着是应该在生命周期里做文章，但是还是不知道怎么通过改变url去触发setState事件

Answer 1

有朋友在一个月后也碰到了同样的问题，我就把当时解决的方案写下来吧，之前忘记自问自答了
其实解决的方法是用了componentWillReceiveProps(nextProps){}这个函数

这里的nextProps.match.params就是改变了后的地址对象，而skuId是这个对象里的一个参数，首先每次这个参数修改，都会触发componentWillReceiveProps函数，而我在这个函数里重新获取skuId，再重新触发setState；这里setState的第二个参数（函数）中的fetchGoodsInf()，是ajax请求后setState的一系列操作，我在componentDidMount中也调用了fetchGoodsInf()，这样就会通过参数的变化重新渲染页面了。这个方法是我自己摸索的，可能会有更好的办法

componentWillReceiveProps(nextProps){
    const skuId = nextProps.match.params.skuId.substring(1);
    this.setState({
        skuId
    },()=>{
        this.fetchGoodsInfo();
    });
}

Answer 2

这么多回答只有一个靠谱的（而且对于 React Router 4 已经过时），特别题主已经把需求描述得很清楚了，居然还有问题都没有看明白就直接杠题主的……真是让人对中文技术环境感到痛心。
大家讲话还是要友善一点的嘛。
@allenGKC 这位大大提出了更改 key 的思路，但是所给出的博文中的方法对于 rr4 已经不适用了。可是思路是很棒的><我也知道改 key 会重新渲染组件，但是都没想到这个方法。
针对这个思路，这篇文章可以看一下，就是针对 rr4 这个问题的解决方法：Pass props to a component rendered by React Router

Answer 3

兄弟. 这个应该在 componentDidUpdate() 里做文章.
我猜你的数据应该是在 componentDidMount 里获取, 对吧.
这个方法只会挂载的时候调用一次.
组件的 state, 传递下来的props变了, 都会触发组件的更新过程.
而你的路由变了, props.params 变了, 所以会触发更新过程.
你应该在 componentDidUpdate() 里重新获取数据.

Answer 4

给组件加key，参考React 有状态组件及 key 属性的应用

Answer 5

本来就不会刷新或者跳转，要跳转的还要前端的路由干嘛。

ID变了你根据ID重新去获取数据，然后把页面重新渲染就好了。

Answer 6

<Route path={/detail/:skuId} component={Details} />
const Detail = ({match}) => (
<div>

<Detail id={match.params.skuId}/>

</div>
)

Answer 7

遇到了同样的问题 请问解决了么~

Answer 8

第一次使用#base/page进入时候，会执行componentWillMount方法，更改路由为#base时候，不会执行componentWillMount，即使路由更改为#base/page2也不会执行componentWillMount
我在业务上做了处理，可以刷新了。
在componentDidUpdate中判断url参数是否和this.state中的一致，如果不一致，就进行this.setState

有没有更好的方法？