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. loadrunner 场景设计-集合点设置

    场景设计-集合点设置 by:授客 QQ:1033553122 1  作用 通过让多用户在同一时间点上进行并发操作来测试系统的并发处理的能力 2  实现 通过集合点函数来实现. 注意:集合点经常和事务结 ...

  2. Android studio 在一个项目上添加另一个项目,引用其内部参数

    Setting.gradle 里面 添加 include ':app',‘imagePicker’ 其中 imagePicker 为要引入的项目名 build.gradle(Module: app)  ...

  3. python利用Trie(前缀树)实现搜索引擎中关键字输入提示(学习Hash Trie和Double-array Trie)

    python利用Trie(前缀树)实现搜索引擎中关键字输入提示(学习Hash Trie和Double-array Trie) 主要包括两部分内容:(1)利用python中的dict实现Trie:(2) ...

  4. python第三十天-类

    编程范式 编程是程序员用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程 , 一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大路通罗马,实现一个任务的方式有很 ...

  5. C#语言————格式化数值结果表

    字符 说明                                     示例                                                 输出结果.C ...

  6. Sql注入的分类:数字型+字符型

    Sql注入: 就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.通过构造恶意的输入,使数据库执行恶意命令,造成数据泄露或者修改内容等,以 ...

  7. 小程序布局中class='container'的bug

    display:flex失效,并增加其他额外属性,暂时记录,还未查询是何原因导致,更改calss则无此问题.

  8. [bug] 验证selenium的显式和隐式等待而发现的一个低级错误

    隐式等待:如果在规定时间内网页加载完成,则执行下一步,否则一直等到时间截止,然后执行下一步.按照这说法举了个例子为啥不会按照预期执行了,难不成是这个定义有问题(~~~~~直接否定不是定义的问题,相信它 ...

  9. jquery easyui datagrid js获取记录数 页数 当前页

    首先要吐槽的是 easyui竟然找不到未压缩的版本(1 也许它是藏在某个个几角旮旯; 2 压缩的版本想看懂? 大概你得在你脑袋上外接个CPU), 而且官方的文档简陋的不能再简陋了, 想实现个稍微复杂点 ...

  10. IO_ObjectOutputStream(对象的序列化)

    对象序列化就是将一些对象写入到硬盘中存储起来,以便下次复用 import java.io.FileInputStream; import java.io.FileOutputStream; impor ...