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

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

5.0.1版本的react-router-dom路由传参以及路由表的配置和接收页面的接受的更多相关文章

  1. react router @4 和 vue路由 详解(五)react怎么通过路由传参

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...

  2. React跳转路由传参3种方法和区别

    1.params传参 路由表配置:参数地址栏显示 路由页面:<Route path='/demo/:id' component={Demo}></Route> //配置 /:i ...

  3. 从 React Router 谈谈路由的那些事

    React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...

  4. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  5. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  6. React 版本16.9.0 中配置路由以及路由传参

    我的脚手架版本如下: "dependencies": { "antd": "^3.21.4", "jquery": &q ...

  7. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  8. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  9. vue3.x版本路由router跳转+传参

    显示传参模式 get import { useRouter } from 'vue-router'; const router = useRouter(); let skipEdit = (key: ...

随机推荐

  1. LintCode 两两交换链表中的节点

    给一个链表,两两交换其中的节点,然后返回交换后的链表. 样例 给出 1->2->3->4, 你应该返回的链表是 2->1->4->3. 分析:第一次调试的时候用了P ...

  2. ES6 新的数据类型Map和Set

    Map Map是一组键值对的结构,具有极快的查找速度. 举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array: var names = ['Michael', 'Bo ...

  3. Docker Tomcat部署

    1.下载tomcat镜像 docker pull tomcat 2.上传项目 /etc/tomcat/webapps/ 3.启动tomcat容器 docker run -d --name tomcat ...

  4. 优化 Tengine HTTPS 握手时间

    背景 网络延迟是网络上的主要性能瓶颈之一.在最坏的情况下,客户端打开一个链接需要DNS查询(1个 RTT),TCP握手(1个 RTT),TLS 握手(2个RTT),以及最后的 HTTP 请求和响应,可 ...

  5. activity与fragment之间的传递数据

    首先activity之间的数据传递就是 用intent和intent+bundle intent 传递 Intent i= new Intent(MainActivity.this,TheAty.cl ...

  6. ACdream 1099求第k大

    题目链接 瑶瑶的第K大 Time Limit: 10000/5000MS (Java/Others)Memory Limit: 512000/256000KB (Java/Others) Submit ...

  7. Java 1.8 Stream 用例测试

    package stream; import model.Student; import org.junit.jupiter.api.Test; import java.util.*; import ...

  8. 当node升级后导致webpack打包出错,node-saas出问题的解决办法

    报错信息如下: ERROR in ./node_modules/_extract-text-webpack-plugin@3.0.2@extract-text-webpack-plugin/dist/ ...

  9. js自定义滚动条

    今天听到别人说自定义滚动条,所以就在吃饭的时间写了个 html部分 <div class="out" id="out"> <div class ...

  10. oracle默认日期格式

    有关 Oracle 数据库中支持的语言的完整列表,以及与区域设置相关的信息细节,请参阅 Oracle Database Globalization Support Guide. 默认日期格式 小时.日 ...