react-router路由地址变了页面却没有跳转的解决办法

最近，自己在摸索react的时候，遇到一个很奇葩的问题，大概是这样的：

我从列表页使用Link跳转到详情页面，列表页面的路由是'/list'，详情页面的路由是'/list/detail'，由于详情页面的路由里边也包含了'/list'，所以在点击列表页面要去详情页时，地址栏里的地址变了，可详情页面却在列表页面里边直接加载出来了，导致俩页面成为一个页面了，这在我写vue的时候从来就不会出现的问题，怎么到了react就出现这个问题了呢？

于是，我就上网搜索解决的办法，搜了一大通，各种解决办法都有，看来不止我一个人遇到了这样的问题，大部分同行给出的解决办法是使用withRouter，那么withRouter到底是干嘛的？
有解释说：

withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入
无需一级级传递 react-router 的属性，当需要用的router
属性的时候，将组件包一层withRouter，就可以拿到需要的路由信息

还有解释说：

如果使用了react-router-redux,则可以直接从state中的router属性中获取location。不需要再使用withRouter获取路由信息了

云山雾罩...

既然有人说使用withRouter可以解决我这样的问题，那我就试了试，压根不管用啊。

继续搜索解决办法，于是又看到了有人说可能是因为路由'/list/detail'放在了路由'/list'的后边，即：

<Route path="/list" exact component={List} />
<Route path="/list/detail" exact component={Detail} />

我心想还有这说法？抱着试试看的心态，就赶紧换成了：

<Route path="/list/detail" exact component={Detail} />
<Route path="/list" exact component={List} />

结果可想而知，这种方法只不过是将显示详情内容的地方给挪到了列表的上边，这算什么？这算什么？这算什么？

其实在这里，如下图：

还是继续找寻解决办法吧，于是又看到了有人说可能是路由表的外边又多套了一个Router，于是我就赶紧去检查了我的路由代码，没有啊，没有多嵌套啊。丧啊！！！

抱着不解决问题誓不罢休的精神，继续搜索解决办法。这次，皇天不负有心人啊，终于找到了解决办法：

<Route path="/list" exact component={List} />

喏，只是在路由‘/list’配置的时候加了一个exact，那么这玩意儿到底又是什么鬼呢？

exact属性用来指明这个路由是不是排他的匹配

这是因为v4中的路由默认都是非排他的，这一点和v3的实现思路截然不同。V3中的路由是排他性的，这意味着只有一个路由可以匹配，V4中的路由则是包含性的，这意味着一个地址可以匹配多个并同时渲染。说白了，如果没有exact属性，List组件( 地址为'/list' )和其子组件( 地址为'/list/detail' )就会同时绘制在一个页面上。大概其呢就是精确匹配吧，我是这么理解的。

问题终于解决，看来办法总是会比问题多，其实也说明了一个问题，还是对react-router的API不熟悉，也算是长个教训吧！

最后，或许由于大家的写法不太一样，所以本文中出现的其他的解决办法可能也是正确的解决办法，大家可以自行试一试。

参考：
https://blog.csdn.net/weixin_30363263/article/details/80992288
https://www.jianshu.com/p/548674270455
https://www.jianshu.com/p/bf6b45ce5bcc

转载于:https://www.cnblogs.com/tnnyang/p/10496722.html