最近,自己在摸索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中的路由则是包含性的,这意味着一个地址可以匹配多个
问题终于解决,看来办法总是会比问题多,其实也说明了一个问题,还是对react-router的API不熟悉,也算是长个教训吧!
最后,或许由于大家的写法不太一样,所以本文中出现的其他的解决办法可能也是正确的解决办法,大家可以自行试一试。
参考:
https://blog.csdn.net/weixin_30363263/article/details/80992288
https://www.jianshu.com/p/548674270455
https://www.jianshu.com/p/bf6b45ce5bcc