美文网首页
react 路由传参列表传详情

react 路由传参列表传详情

作者: 雨泽丶 | 来源:发表于2019-04-19 17:41 被阅读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 路由传参列表传详情

    list页->detail页 方法一:路由参数** 路由导航: detail页获取参数: 准确的获取到id,不需要...

  • 微信小程序路由传参

    路由传参常用方式有以下几种 通过url传参// 产品列表页面 详情 // 或者wx.navigateTo({ ...

  • 微信小程序--数据传参数

    「高内聚低耦合」✌️ 1.列表传参 列表页: 数据页: 2.详情页传参 文件架构: 列表页: 详情页:

  • React路由

    React-Router的基本配置 基本案例 路由传参 动态路由 首先在app.jsx中添加路由(分别是新闻列表页...

  • Vue实战第二天

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

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

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

  • 组件间传值之@Input

    组件间传值,可以用Input或者路由传值。例如:由列表页进入详情页1、如果用路由传值,就只需要在路由中添加id参数...

  • React路由传参

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

  • React路由传参

    1.params xxx...

  • react路由传参

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

网友评论

      本文标题:react 路由传参列表传详情

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