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: ...
随机推荐
- LintCode 两两交换链表中的节点
给一个链表,两两交换其中的节点,然后返回交换后的链表. 样例 给出 1->2->3->4, 你应该返回的链表是 2->1->4->3. 分析:第一次调试的时候用了P ...
- ES6 新的数据类型Map和Set
Map Map是一组键值对的结构,具有极快的查找速度. 举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array: var names = ['Michael', 'Bo ...
- Docker Tomcat部署
1.下载tomcat镜像 docker pull tomcat 2.上传项目 /etc/tomcat/webapps/ 3.启动tomcat容器 docker run -d --name tomcat ...
- 优化 Tengine HTTPS 握手时间
背景 网络延迟是网络上的主要性能瓶颈之一.在最坏的情况下,客户端打开一个链接需要DNS查询(1个 RTT),TCP握手(1个 RTT),TLS 握手(2个RTT),以及最后的 HTTP 请求和响应,可 ...
- activity与fragment之间的传递数据
首先activity之间的数据传递就是 用intent和intent+bundle intent 传递 Intent i= new Intent(MainActivity.this,TheAty.cl ...
- ACdream 1099求第k大
题目链接 瑶瑶的第K大 Time Limit: 10000/5000MS (Java/Others)Memory Limit: 512000/256000KB (Java/Others) Submit ...
- Java 1.8 Stream 用例测试
package stream; import model.Student; import org.junit.jupiter.api.Test; import java.util.*; import ...
- 当node升级后导致webpack打包出错,node-saas出问题的解决办法
报错信息如下: ERROR in ./node_modules/_extract-text-webpack-plugin@3.0.2@extract-text-webpack-plugin/dist/ ...
- js自定义滚动条
今天听到别人说自定义滚动条,所以就在吃饭的时间写了个 html部分 <div class="out" id="out"> <div class ...
- oracle默认日期格式
有关 Oracle 数据库中支持的语言的完整列表,以及与区域设置相关的信息细节,请参阅 Oracle Database Globalization Support Guide. 默认日期格式 小时.日 ...