//第一种  通过问号传参
//发送
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. Java基础-注解

    什么是注解? Jdk1.5新增新技术,注解.很多框架为了简化代码,都会提供有些注解.可以理解为插件,是代码级别的插件,在类的方法上写:@XXX,就是在代码上插入了一个插件. 注解不会也不能影响代码的实 ...

  2. centos下彻底删除mysql

    打算重新试试安装两个mysql,就把老的删除了. yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mys ...

  3. 洛谷P1083 [NOIP2012提高组Day2T2]借教室

    P1083 借教室 题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借 ...

  4. Leetcode617.Merge Two Binary Trees合并二叉树

    给定两个二叉树,想象当你将它们中的一个覆盖到另一个上时,两个二叉树的一些节点便会重叠. 你需要将他们合并为一个新的二叉树.合并的规则是如果两个节点重叠,那么将他们的值相加作为节点合并后的新值,否则不为 ...

  5. JS方法大全

    方法:document.createElement(tagName) 说明:创建指定元素 方法:document.createTextNode(文本) 说明:创建文本节点 方法:_dom.append ...

  6. web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  7. angular依赖注入(3) —— 的提供商

    一.注册商必须写在NgModel当中,不然只能对当前组件注入 二.写法: 1.令牌:providers:[Logger,Data] 2.供应商定义对象:providers:[{provide:Logg ...

  8. vi中如何跳转到指定行数

    输入:n,代表跳转到第n行,如:100,就跳转到第100行.

  9. Ajax.dll使用方法和步骤(比较方便的实现ajax)

    转载自   博客频道 - CSDN.NET http://blog.csdn.net/houhanxin1/article/details/6671470 1. 有直接用框架的:Ajaxpro和Aja ...

  10. (二)SpringBoot功能

    web开发 spring boot web开发非常的简单,其中包括常用的json输出.filters.property.log等 json 接口开发 在以前的spring 开发的时候需要我们提供jso ...