//第一种  通过问号传参
//发送
this.props.history.push("/detail?id="+item.downurl)
//路由表配置
<Route path="/detail" component={Detail} exact></Route>
//接收 可以获取到?后面的方法
this.props.location.search
无弊端 刷新参数也有 //第二种 通过/传参 也就是动态路由!!!
//发送
this.props.history.push("/detail/"+8)
//路由表配置
<Route path="/detail/:id" component={Detail} exact></Route>
//接收 可以获取到关于id的一个对象
this.props.match.params
无弊端 刷新参数也有 //第三种通过对象发送跳转路由
this.props.history.push("/detail",{downurl:999});
//路由表配置
<Route path="/detail" component={Detail} exact></Route>
//接收 可以获取到一个关于downurl的对象
this.props.location.state
弊端!!!
通过HashRouter设置的路由可以跳转但是访问不到参数!!! //通过标签跳转加传参
第一种单纯的跳转不传参
<Link to="/main/list"><Link> 第二种传参数跳转
<Link to={{
pathname:"/detail",
search:"?id=1", //获取this.props.location.search
state:{fromDashboard:11}//获取this.props.location.state
}}>跳起来啊啊啊啊
</Link> //路由表配置
<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. DLX

    #include <iostream> #include <cstdlib> #include <cstring> #include <queue> # ...

  2. ubuntu 安装 go 编译环境

    参考: http://wiki.ubuntu.org.cn/Golang 从仓库安装(apt-get) sudo apt-get install golang 修改环境变量: vim /etc/env ...

  3. R330 打印机连供墨水红灯常量处理

    墨水灯红灯常量,表示墨盒没墨水 1.按红灯,将墨盒移动到右侧空处 2.按住连供顶部的重置小按钮 15秒以上,复位(这个应该是让连供墨盒产生一个另外的墨盒序号,骗打印机换了个新墨盒) 3.按打印机红灯, ...

  4. JAVA:在0-99间产生100个不重复的随机数

    Random rand = new Random(); boolean[] bool = new boolean[100]; int[] number = new int[100]; int rand ...

  5. day38 02-Spring快速入门

    Spring的核心是IOC和AOP,其他的什么像SpEL都是对IOC的支持. Spring里面的web指的是它可以使用Spring MVC. 集成指的是整合其他的框架. schema是所有配置文件的约 ...

  6. Leetcode40. Combination Sum组合总数2 II

    给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字在每个组合中只能使用一次. ...

  7. 小米网关api

    http://bbs.xiaomi.cn/t-13198850 https://github.com/snOOrz/homebridge-aqara/blob/master/README.md htt ...

  8. 【python之路13】python的深浅拷贝

    深浅拷贝 一.数字和字符串 对于 数字 和 字符串 而言,赋值.浅拷贝和深拷贝无意义,因为其永远指向同一个内存地址. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 impor ...

  9. selenium(1):python3.6.4+selenium3.0+chrome环境配置

    本文为配置过程: python  1.python3.6.4下载安装见python安装说明.(本博客) 2.安装python的集成编译器PyCharm. PyCharm 是由 JetBrains 打造 ...

  10. Kryo官方文档-中文翻译

    Kryo作为一个优秀的Java序列化方案,在网上能找到不少测评,但未见系统的中文入门或说明文档.官方文档是最好的学习文档.虽然英文不差,但啃下来毕竟没母语来的舒服.这里抽出时间做些翻译,以方便大家查阅 ...