zoukankan      html  css  js  c++  java
  • 5.0.1版本的react-router-dom路由传参以及路由表的配置和接收页面的接受

     1 //第一种  通过问号传参
     2 //发送
     3 this.props.history.push("/detail?id="+item.downurl)
     4 //路由表配置
     5 <Route path="/detail" component={Detail} exact></Route>
     6 //接收  可以获取到?后面的方法
     7 this.props.location.search 
     8 无弊端 刷新参数也有
     9 
    10 
    11 //第二种 通过/传参  也就是动态路由!!!
    12 //发送
    13 this.props.history.push("/detail/"+8)
    14 //路由表配置
    15 <Route path="/detail/:id" component={Detail} exact></Route>
    16 //接收 可以获取到关于id的一个对象
    17 this.props.match.params 
    18 无弊端 刷新参数也有
    19 
    20 //第三种通过对象发送跳转路由
    21 this.props.history.push("/detail",{downurl:999});
    22 //路由表配置
    23 <Route path="/detail" component={Detail} exact></Route>
    24 //接收  可以获取到一个关于downurl的对象
    25 this.props.location.state
    26 弊端!!! 
    27 通过HashRouter设置的路由可以跳转但是访问不到参数!!!
    28 
    29 
    30 //通过标签跳转加传参
    31 第一种单纯的跳转不传参
    32 <Link to="/main/list"><Link>
    33 
    34 第二种传参数跳转
    35 <Link to={{
    36             pathname:"/detail",
    37             search:"?id=1",  //获取this.props.location.search 
    38             state:{fromDashboard:11}//获取this.props.location.state 
    39             }}>跳起来啊啊啊啊
    40   </Link>
    41             
    42   //路由表配置
    43 <Route path="/detail" component={Detail} exact></Route>

         不足知足欢迎补充喽~~~

  • 相关阅读:
    .NET开源系统
    DEDEcms二次开发数据表参数
    dede系统的pagebreak文章页面分页数量控制方法
    窗口最小化到托盘
    SEO项目各个阶段的工作分配
    scrollTop
    去除行内块间的间距
    jquery mobile
    nodejs学习
    cancelAnimationFrame无效
  • 原文地址:https://www.cnblogs.com/cq1715584439/p/11079616.html
Copyright © 2011-2022 走看看