• 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

  • 相关阅读:
    27、BLASTN的参数
    6、R语言绘制带errorbar 的柱状图
    26、HDF5 文件格式简介
    25、转录本(transcript)组成(gtf文件的第三列)
    6、perl创建模块(Exporter)及路径 引用 嵌套 查询模块
    24、嵌合体序列Chimeras
    24、sam- 详解
    22、IDP-ASE
    21 、GPD-PSL-VCF
    EasyUI 中easyui-textbox和easyui-searchbox文本框的点击事件。
  • 原文地址:https://www.cnblogs.com/tnnyang/p/10496722.html
Copyright © 2020-2023  润新知