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. Testlink Testlink在Windows下的安装

    Testlink在Windows下的安装   by:授客 QQ:1033553122   测试环境 testlink-1.9.14 下载地址:http://pan.baidu.com/s/1pLrcu ...

  2. MVC与单元测试实践之健身网站(完)-备案与部署

    主页-http://www.zhixin9001.cn/Home/Introduce GitHub- https://github.com/zhixin9001/Fitness 这是关于Fit网站的最 ...

  3. 慕学在线网0.5_xadmin的全局配置

    全局配置包括了以下修改: 开启主题功能: 修改左上角的"django Xadmin"和主界面的"我的公司": App菜单收叠: App名字修改(汉化). 1.把 ...

  4. linux networking

    ip route解读 default via 192.168.1.1 dev wlan0 dev wlan0 proto kernel scope link src 192.168.1.100 htt ...

  5. 洗礼灵魂,修炼python(39)--面向对象编程(9)—魔法方法表

    好的,不多说,大招来了,几乎完整的魔法方法: 基本的魔法方法 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Defi ...

  6. Linksys EA6500刷ddwrt成功记

    网上刷Linksys EA6500的资料不多,然后又绕了好多个弯子,自己记录备忘. 首先EA6500有两个版本v1和v2,对应的固件不同. 区分方法: 1.v1的背后是两个颜色一样的usb2.0 2. ...

  7. V4L2 driver -整体架构

    我的uvc开源地址:gitee-uvc 字符设备驱动程序核心:V4L2本身就是一个字符设备,具有字符设备所有的特性,暴露接口给用户空间. V4L2 驱动核心:主要是构建一个内核中标准视频设备驱动的框架 ...

  8. js判断元素是否是disable状态

    js判断元素是否是disable状态 jquery判断元素状态用$(select).prop(属性值) == true js判断button是否可以点击: //判断button是否为不可点击状态 if ...

  9. JSON语法规则

    JSON 语法规则 JSON 语法是 JavaScript 对象表示法语法的子集. 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 JSON 名称/值对 JSON 数据的书写格式是 ...

  10. ABAP 7.50 新特性之另一个CORRESPONDING

    在ABAP中,存在着一条法则:同样的名称代表的不一定是同样的东西(具体可看最近的相关讨论). 但是如你们所知的,存在着一个很好的例外: 所有涉及到使用CORRESPONDING为结构赋值的关键字的语法 ...