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实现的方 ...
随机推荐
- 如何判断一个 APP页面是否是H5页面
1.无网络断开网络,显示404或则错误页面的是H5 2.页面布局a.在手机设置.开发者选项中开启显示布局边界功能:b.进入应用查看布局边界:c.原生应用可以看到各个控件的布局边界,H5只有整个页面的一 ...
- 为什么 C# 比 C++ 编译快那么多
Go 我不懂,下面以 C++ 和 C# 对比来说明为什么 C++ 编译慢和 C# 编译快. C 和 C++ 文件的编译经过几个主要步骤: 处理续行符处理(“\”)之类的杂事 词法分析,解析出 toke ...
- 《Inside C#》笔记(四) 类
类是对数据结构和算法的封装. 一 类成员 类成员包括以下几类,作者在后面的章节会详细讲解. 字段(用来保存数据,可用static readonly const来修饰).方法(操作数据的代码).属性(用 ...
- IDEA错误:Failed to start end point associated with ProtocolHandler [http-nio-9999] java.net.BindException: Address already in use: bind
日志显示进程端口已被占用,首先需要的是查询什么进程占用了当前的9999端口. 1.win+R输入cmd进入命令界面: 2.输入命令 netstat -ano|findstr "端口号&qu ...
- 解决Firefox下,页面元素不刷新问题
由于FireFox的刷新机制与IE有较大区别.所以javascript代码 document.location.reload();通常在IE上工作正常,在Firefox下效果却并不理想,这是因为Fir ...
- Apache POI导出excel表格
项目中我们经常用到导出功能,将数据导出以便于审查和统计等.本文主要使用Apache POI实现导出数据. POI中文文档 简介 ApachePOI是Apache软件基金会的开放源码函式库,POI提供A ...
- SQLServer限制IP,限制用户,限制SSMS登录
SQL Server不像Mysql那样原生支持限制IP登录. 但可以使用Login触发器来实现. 以下为使用Login触发器实现限制用户u_user_r在指定IP192.168.1.205使用SSMS ...
- [cb]SceneView 获取鼠标位置
扩展需求 在Scene视图中获取鼠标的位置 Demo 在Scene视图中,当鼠标点击时实例化一个Cube 重点部分 实现代码 using UnityEngine; using UnityEditor; ...
- Can't debug c++ project because unable to static library start program *.lib
Can't debug c++ project because unable to static library start program *.lib I'm using a library ( ...
- win10怎么查看进程
1.在任务栏右击-任务管理器 2.