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-页面路由参数传递的两种方法的更多相关文章

  1. jquery/js/a标签实现当前页面跳转的两种方法

    在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处 有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前 ...

  2. PHP页面间参数传递的四种方法详解

    2016-04-16 定义page01.php和page02.php两个php文件,将page01中的内容想办法传递到page02,然后供我们继续使用.------------------------ ...

  3. Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

  4. 【转】Vue-详解设置路由导航的两种方法: <router-link :to="..."> 和router.push(...)

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串 <router-link to= ...

  5. Vue-详解设置路由导航的两种方法

    https://www.cnblogs.com/superlizhao/p/8527317.html

  6. uni-app 页面跳转的两种方法

    1.navigator  标签 <navigator url="../component/classdetails/classdetails"> <view cl ...

  7. 使用js提交form表单的两种方法

    提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...

  8. PHP中对用户身份认证实现两种方法

    用户在设计和维护站点的时候,经常需要限制对某些重要文件或信息的访问.通常,我们可以采用内置于WEB服务器的基于HTTP协议的用户身份验证机制.     当访问者浏览受保护页面时,客户端浏览器会弹出对话 ...

  9. 两种方法使用js读写cookie实现一个底部广告浮层效果

    下面一个案例实现了js实现一个页面浮层并且使用两种方法使用js读写cookie:来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方 ...

随机推荐

  1. CSS字体超出两行省略

    text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-w ...

  2. SD从零开始71 业务信息仓库(BW)

    SD从零开始71 业务信息仓库(BW)概念 在线事务处理的环境OLTP Environment 在事务处理中,我们不断地填充用于跟踪我们的业务流程的数千个不同步骤的特定的表: 例如,销售凭证行条目来自 ...

  3. CloudSim源代码学习——云数据中心(Datacenter)

    package org.cloudbus.cloudsim; import java.text.DecimalFormat;//十进制 import java.util.ArrayList; impo ...

  4. Tsung CentOS 操作系统下搭建tsung性能测试环境_Part 1

    CentOS 操作系统下搭建tsung性能测试环境_Part 1 by:授客 QQ:1033553122 步骤1.下载软件安装包 CentOS-6.0-x86_64-bin-DVD1.iso jdk- ...

  5. JS笔记(一):基础知识

    (一) 标识符 标识符就是一个名字,在JS中,标识符用来对变量和函数命名,或者用做JS代码中某些循环语句中的跳转位置的标记.JS的标识符必须以字母._或$符号开始,后续字符可以是字母.数字._或$符号 ...

  6. Chrome_浏览器开发人员工具

    Google Chrome 浏览器开发人员工具,让网页开发变得更轻松 无论是 IE 6/7 的 Internet Explorer Developer Toolbar 或者是 IE 8 自带的 Dev ...

  7. PL/SQL 删除主键 ORA-02443: 无法删除约束条件-不存在的约束条件

    在PL/SQL developer中删除一个表的主键,然后把另外一个字段设置成主键,删除的过程中报错:ORA-02443 我遇到这个问题出现的背景是: alter table saleqtya dro ...

  8. Linux永久修改系统时间

    1.date 查看系统时间 2.hwclock --show 查看硬件的时间 3.hwclock --set --date '2017-08-16 17:17:00' 设置硬件时间为17年8月16日1 ...

  9. nginx代理 upstream轮询

    问题描述 我有2个Tomcat  一个端口开启(8021),一个端口未开启(8022),在nginx里用upstream模块进行代理 ,代理的负载算法采用的是默认的轮询算法,配置成功后,访问页面时并没 ...

  10. 【微信JSSDK】PHP版微信录音文件下载

    微信的录音文件上传到微信服务器上,只能保存三天. 因此需要做一个转存到自己服务器,或者七牛云的操作. 转存到自己服务器 调用微信JSSDK API 录音, 录音结束,上传到微信服务器,获取录音文件的 ...