美文网首页
react路由传参

react路由传参

作者: 237房间 | 来源:发表于2019-04-27 21:35 被阅读0次

list页->detail页
方法一:路由参数**
路由导航:
用“/”

<Link to={'/detail/'+item.get('id')} key={index}>

路由map:

加"/:id"

<Route exact path="/detail/:id" component={Detail} />

detail页获取参数:
准确的获取到id,不需要做处理

<pre>this.props.match.params.id</pre>

方法二:查询参数**
路由导航:
用“?”

<Link to={'/detail?'+item.get('id')} key={index}>

用"$"

<Link to={`/statics/helloWorld/${id}/${appName}`}>
// 或者
<Link to={{pathname: `/statics/helloWorld/${id}/${appName}`}}>

路由map:

不加"/:id"

<Route exact path="/detail" component={Detail} />

detail页获取参数:
不能准确的获取到id,需要做处理

this.props.location.search

代码中出现的问题

 this.props.history.push({
      pathname: '/me'
    })

网页报错history/push 是无法识别的函数

解决问题方法:
父组件里

  <Page {...this.props}/>

调用props给子组件

相关文章

  • React路由传参

    1.params 优势 : 刷新地址栏,参数依然存在缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而...

  • React路由传参

    1.params xxx...

  • react路由传参

    list页->detail页方法一:路由参数**路由导航:用“/” 路由map: 加"/:id" detail页获...

  • react路由传参

    背景,找到一篇博文写的关于路由传参,但是该片博文中有一些错误的信息,所以在下重新整理了一下内容这是参考的博文地址h...

  • react 路由传参

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • react-31-路由传参

    1. 前言 传参一直都是重点一起梳理下 有哪些路由传参的方式本章节代码在react-路由配置[https://ww...

  • react路由跳转传参方式

    react在路由跳转进行传参有以下几种方式:1. params方式传参app.js 子组件OnRefs.js 组件...

  • vue路由 filters方法和filter过滤用法总结

    限制单行文字长度 路由传参写法 ---- 声明式 路由传参写法 ---- 编程式 路由传参写法 ---- 路由里要...

  • react --- 路由跳转、路由传参

    一、路由跳转1、a标签跳转 2、js跳转 一、路由传参1、state(不消失) 2、params(不消失) 3、q...

网友评论

      本文标题:react路由传参

      本文链接:https://www.haomeiwen.com/subject/hgghnqtx.html