5.0.1版本的react-router-dom路由传参以及路由表的配置和接收页面的接受
//第一种 通过问号传参
//发送
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路由传参以及路由表的配置和接收页面的接受的更多相关文章
- react router @4 和 vue路由 详解(五)react怎么通过路由传参
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...
- React跳转路由传参3种方法和区别
1.params传参 路由表配置:参数地址栏显示 路由页面:<Route path='/demo/:id' component={Demo}></Route> //配置 /:i ...
- 从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- React 版本16.9.0 中配置路由以及路由传参
我的脚手架版本如下: "dependencies": { "antd": "^3.21.4", "jquery": &q ...
- react router路由传参
今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...
- React Router路由传参方式总结
首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...
- vue3.x版本路由router跳转+传参
显示传参模式 get import { useRouter } from 'vue-router'; const router = useRouter(); let skipEdit = (key: ...
随机推荐
- [转]深入理解客户区尺寸client
关于元素尺寸,一般地,有偏移大小offset.客户区大小client和滚动大小scroll.前文已经介绍过偏移属性,后文将介绍scroll滚动大小,本文主要介绍客户区大小client 客户区大小 客户 ...
- 关于网上大量对Vue双向绑定的错误理解
对于Vue的双向绑定,现在基本是个前端都听说过,面试官也喜欢问这个问题.但对于Vue双向绑定的原理,掘金.博客园和segmentfault等技术社区充斥着大量的错误文章.这些文章的题目基本样子如下 “ ...
- 安装 TortoiseSVN 时提示 please install the universal crt first
win7x64 解决办法 去https://www.microsoft.com/zh-cn/搜索 universal crt (hotfix kb2999226)点击下图链接 也就是https://s ...
- IO流9 --- 使用FileInputStream和FileOutputStream读写非文本文件 --- 技术搬运工(尚硅谷)
字节流读写非文本文件(图片.视频等) @Test public void test5(){ File srcFile = new File("FLAMING MOUNTAIN.JPG&quo ...
- day36 05-Hibernate检索方式:离线条件查询
图二 离线条件查询 Struts 2是web层的框架.session得在dao层才有.有的时候这些数据是没在你的对象里面的.像是否上传简历.这个字段不在我的数据库里面.例如是否上传简历这个条件不在我们 ...
- Python实例 分割路径和文件名
import os.path # 常用函数有三种:分隔路径,找出文件名.找出盘符(windows系统),找出文件的扩展名. # 根据你机器的实际情况修改下面参数. spath = " D: ...
- 【react】react-bookManager
作者可能是本意想要做一个图书管理系统,不过添加书籍的时候报错,所以简单的页面我们简单的看看 先上github地址:https://github.com/hesisi/react-bookManager ...
- UE4物理模块(二)---建立物体碰撞
在前文中介绍了什么是物理以及如何在UE4和PhysX中进行可视化调试: Jerry:UE4物理模块(一)---概述与可视化调试zhuanlan.zhihu.com 这里调试只谈到了碰撞盒(后续还会有 ...
- DOM 创建元素 删除元素(结点)
创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <script> var para=document. ...
- LintCode刷题笔记-- CoinsInLine
标签: 动态规划 问题描述: There are n coins with different value in a line. Two players take turns to take one ...