React-页面路由参数传递的两种方法
list页->detail页
方法一:路由参数
路由导航:
用“/”
<Link to={'/detail/'+item.get('id')} key={index}>
路由map:
加"/:id"
<Route exact path="/detail/:id" component={Detail} />
detail页获取参数:
准确的获取到id,不需要做处理
this.props.match.params.id
方法二:查询参数
路由导航:
用“?”
<Link to={'/detail?'+item.get('id')} key={index}>
路由map:
不加"/:id"
<Route exact path="/detail" component={Detail} />
detail页获取参数:
不能准确的获取到id,需要做处理
this.props.location.search
React-页面路由参数传递的两种方法的更多相关文章
- jquery/js/a标签实现当前页面跳转的两种方法
在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处 有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前 ...
- PHP页面间参数传递的四种方法详解
2016-04-16 定义page01.php和page02.php两个php文件,将page01中的内容想办法传递到page02,然后供我们继续使用.------------------------ ...
- Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)
一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...
- 【转】Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)
一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...
- Vue-详解设置路由导航的两种方法
https://www.cnblogs.com/superlizhao/p/8527317.html
- uni-app 页面跳转的两种方法
1.navigator 标签 <navigator url="../component/classdetails/classdetails"> <view cl ...
- 使用js提交form表单的两种方法
提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...
- PHP中对用户身份认证实现两种方法
用户在设计和维护站点的时候,经常需要限制对某些重要文件或信息的访问.通常,我们可以采用内置于WEB服务器的基于HTTP协议的用户身份验证机制. 当访问者浏览受保护页面时,客户端浏览器会弹出对话 ...
- 两种方法使用js读写cookie实现一个底部广告浮层效果
下面一个案例实现了js实现一个页面浮层并且使用两种方法使用js读写cookie:来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方 ...
随机推荐
- python之线程相关操作
1.线程: 一个进程可以有多个线程,共享一个进程的资源: 2.进程线程的区别: 进程是资源分配的最小单位,线程是程序执行的最小单位 3.python中线程模块threading, 提供的类: Thr ...
- C# 异步编程1 APM 异步程序开发
C#已有10多年历史,单从微软2年一版的更新进度来看活力异常旺盛,C#中的异步编程也经历了多个版本的演化,从今天起着手写一个系列博文,记录一下C#中的异步编程的发展历程.广告一下:喜欢我文章的朋友,请 ...
- [20180626]函数与标量子查询14.txt
[20180626]函数与标量子查询14.txt --//前面看http://www.cnblogs.com/kerrycode/p/9099507.html链接,里面提到: 通俗来将,当使用标量子查 ...
- python第二天 列表、元组
今天学习了列表.元组相关的知识:与C中的数组列表相似,元组为只读列表: 以及切片相关操作: #!usr/bin/env python #-*-coding:utf-8-*- # Author calm ...
- MySQL--eq_range_index_dive_limit参数学习,MYSQL 5.6 5.7处理数据分布不均的问题
官方文档如下描述:This variable indicates the number of equality ranges in an equality comparison condition w ...
- 传智播客张孝祥java邮件开发随笔01
01_传智播客张孝祥java邮件开发_课程价值与目标介绍 02_传智播客张孝祥java邮件开发_邮件方面的基本常识 03_传智播客张孝祥java邮件开发_手工体验smtp和pop3协议 第3课时 关于 ...
- 2018. first week now at home
外面雪刚停. 现在是2018.1.5 2018 needs to consider next steps了.未雨绸缪啊 下面是2017年last working day 外面黑了,水面上黑 ...
- [Tomcat]The JRE_HOME environment variable is not defined correctly
在tomcat的bin目录下,双击startup.bat,闪一下,就没了,后来仔细看了一下黑屏闪的内容如下: the JRE_HOME environment variable is not defi ...
- UVA1599-Ideal Path(BFS进阶)
Problem UVA1599-Ideal Path Time Limit: 3000 mSec Problem Description New labyrinth attraction is ope ...
- Laravel小项目之第4节 Laravel-通过表单实现新增及操作状态提示功能
第4节 Laravel-通过表单实现新增及操作状态提示功能 4.1 显示新增表单视图 4.2 通过模型实现新增 4.3 操作状态提示 4.1 显示新增表单视图 修改边栏的链接 \resources\v ...