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

时间:2024-04-29 12:58:49

最近,自己在摸索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} />

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

其实在这里,如下图:

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

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

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

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

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

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

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

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

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

参考:

https://blog.****.net/weixin_30363263/article/details/80992288

https://www.jianshu.com/p/548674270455

https://www.jianshu.com/p/bf6b45ce5bcc