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. WebLogic 8的安装与配置详谈

    本文主要是以windouw下32位的版本为例展开介绍,主要包括其安装与配置. 一.图形界面安装过程 1.双击安装程序server815_win32.exe,开始进行程序的安装. 2.点击Next按钮进 ...

  2. 部署Redis(脚本安装)

    部署Redis(脚本安装) #/bin/bash # DES:Redis Deploy # Author: will_xue # Email:linuxcto@aliyun.com # DATE : ...

  3. JSP内置对象——pageContext对象和config对象

    它对应的常用方法有: 现在,我新建一个“pageContext.jsp”页面,可以获得“session_page1.jsp”这个页面中保存的用户名: pageContext.jap: session_ ...

  4. winsock编程学习笔记

    以下部分转自博客http://blog.csdn.net/phunxm/article/details/5085869 套接字地址(sockaddr.sockaddr_in) /* * Structu ...

  5. recovery 升级过程执行自定义shell命令

    有时候我们需要,在升级的过程中,执行一些shell命令,来完成我们的一些需求,利用升级过程,进行一些特殊化的操作,思路如下: 第一: 把我们需要执行的命令,写成一个test.sh脚本,然后在recov ...

  6. nginx 配置简单网站项目(linux下)

    1.新建html2与html3两个网站项目测试,而html是本身就有,记得到/etc/hosts 添加dns记录 2.修改nginx.conf文件 3.测试访问 中间用到一些nginx的命令,就不截图 ...

  7. nginx的ngx_http_realip_module模块和http头X-Forwarded-For、X-Real-IP

    ngx_http_realip_module模块 realip模块作用:当本机的nginx处于反向代理的后端时可以获取到用户的真实ip.可以让accesslog记录用户真实IP地址. set_real ...

  8. 洗礼灵魂,修炼python(45)--巩固篇—【转载】类的__now__和__init__

    学到这里了,相信你应该对__init__非常熟悉了,就是构造器呗,当类被实例化时初始化的作用 但__init__其实不是实例化一个类的时候第一个自动调用的方法.当实例化一个类时,最先被调用的方法 其实 ...

  9. lua保留n位小数方法

    time:2015/04/21 1. string.format() function GetPreciseDecimal(nNum, n) if type(nNum) ~= "number ...

  10. oracle 日期格式化 TO_CHAR (datetime) 修饰语和后缀

    Datetime Format Element Suffixes Suffix Meaning Example Element Example Value TH Ordinal Number DDTH ...