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: ...
随机推荐
- Spring线程安全的实现机制--ThreadLocal
转载: http://blog.csdn.net/lufeng20/article/details/24314381
- spring四种依赖注入方式(转)
spring四种依赖注入方式!! 平常的java开发中,程序员在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理,spring提 ...
- 文件上传之Java篇
最近做了一个下载文档的功能,于是联想到了上传功能,于是自己研究了一下后台语言是java的情况下怎样实现将文件上传到指定的目录,以下是项目的语言: 1.后台用jfinal框架 2.前台用jquery提交 ...
- springMVC--动态验证码实现
在网站开发过程中我们一般都会为了防止用户连续提交都会提供验证码的功能,简单来说就是生成一个动态图片,在图片中保存一些校验信息,将校验信息放到session中和用户提交的验证码信息进行对比,如果出现错误 ...
- Expires
(装载) 简要:添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能,能在后续的页面中有效避免很多不必要的Http请求,WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件 ...
- 移动端h5禁用浏览器左滑右滑的前进后退功能
在项目运行过程中发现,用户在有左右滑动前进后退的功能的浏览器上签字时,偶然触发了前进后退会导致canvas像是重置了一样内容消失,所以需要在代码中处理这种情况. 基本原理就是在touchmove事件中 ...
- go strcut 封装
package model import "fmt" type person struct { Name string age int //其它包不能直接访问.. sal floa ...
- 2-4 Numpy+Matplotlib可视化(二)
自定义绘图 # -*-coding:utf-8-*- # !/usr/bin/env python # Author:@vilicute import numpy as np import matpl ...
- typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...
- Vijos1775 CodeVS1174 NOIP2009 靶形数独
靶形数独 描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他 们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z博士请教, Z 博士拿出了他最近发 ...