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实现的方 ...
随机推荐
- Apex 的异常处理
Apex 中的异常处理 在 Apex 中,和其他语言类似,对于异常处理通常使用 try.catch.finally.throw 等关键字. 对于每一个 try 代码段,必须要有至少一个 catch 或 ...
- 传统BI还是自助式BI---BI与数据分析 ZT
自助式BI或者自助式数据分析是最近几年兴起的一个概念.根据Gartner发布的信息,Self Service Business Intelligence(SSBI)被定义为“终端用户在被批准和支持的平 ...
- 安卓开发_startActivityForResult的详细用法
一个需求:一个activity到另一个activity进行一些设置,返回第一个activity的时候 获取第二个activity设置的数据 百度了一下,发现startActivityForResult ...
- JQuery请求数据的方式
/*$.ajax常用的几个参数 // 1.url:要求为String类型的参数,(默认为当前页地址)发送请求的地址. // 2.type:要求为String类型的参数,请求方式(post或get)默认 ...
- Android Studio_更新Gradle
一.Gradle更新问题 Android Studio每次更新版本都会更新Gradle这个插件,而且有时候提示更新,却一直更新不了,那是因为中国伟大的长城问题.就是下图,我刚刚更新了,提示更新grad ...
- C# 异步编程4 async与await 异步程序开发
随着C#异步程序开发系列的深入,你会发现编写异步程序越发简单.事物的发展就是这样的规律,从简单到复杂再到简单. 在C# 5.0中我们可以通过async与await关键字实现快捷的异步程序开发,如下: ...
- [20180316]理解db file parallel read等待事件.txt
[20180316]理解db file parallel read等待事件.txt --//一直对db file parallel read等待事件不理解,因为在实际系统中很少遇到这样的等待事件. S ...
- Excel函数进阶
#笔记:为了方便自己以后查找,以便随时随地能查看.形成系统化学习! 查找引用函数 ------------------包含----------Vlookup函数(if数组).Hlookup函数.loo ...
- Derek解读Bytom源码-持久化存储LevelDB
作者:Derek 简介 Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom ...
- alsa声卡分析alsa-utils调用过程(二)-tinymixer
继上一篇文章:http://www.cnblogs.com/linhaostudy/p/8515277.html 三.tinymixer调用分析:(tinymixer.log搜索节点:/dev/snd ...