转自:

https://blog.csdn.net/yingzizizizizizzz/article/details/78751305

场景:

一个组件中,含有ul展开数组的组件,在每一行中,都能点击相应的这一行,跳转到对应的页面。

也就是说,组件套组件,子组件中this.props.history.push无法工作。提示没有push这个函数。

因为这时的props中没有history这个属性。

解决办法:

在父组件中,传递一个history。

子组件中用history.push   就可以啦

参考资料:

https://segmentfault.com/a/1190000011137828

<NowplayingChild {...this.props} ></NowplayingChild> //将父组件的属性传递给子组件,否则子组件可能没有属性props,这里用的是属性的简写
<li key={item} onClick={this.handleClick.bind(this,item)}>{item}</li>//子组件的写法
handleClick(id){
//编程式导航
console.log(this.props);
this.props.history.push("/detail/"+id);
}

使用react——解决this.props.history.push无法跳转的问题的更多相关文章

  1. React history.push()无法跳转 url改变页面不渲染

    一.history.push()无法跳转参考了很多文章 研究一下生命周期 render是要有state变化才会执行 BrowserHistory只有props变化 无法触发render 如下改造环境 ...

  2. react-router v4 使用 history 控制路由跳转

    问题 当我们使用react-router v3的时候,我们想跳转路由,我们一般这样处理 我们从react-router导出browserHistory. 我们使用browserHistory.push ...

  3. react native中props的使用

    react native中props的使用 一.props的使用 1:父组件传递的方式 在子组件中可以用this.props访问到父组件传递的值 <View> <Text> { ...

  4. React中render Props模式

    React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...

  5. vue-router同路由$router.push不跳转一个简单解决方案

    vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: toCurrentPage: function(thisId){ this.$rout ...

  6. iOS - 模态Model视图跳转和Push视图跳转的混合需求实现原理

    在研发中总会遇到一些莫名的需求,本着存在即合理的态度跟大家分享一下"模态Model视图跳转和Push视图跳转的需求实现",本文仅仅传授研发技术不传授产品以及UE的思想,请大家合理对 ...

  7. 解决uni-app props 传递数组修改后不能使用问题

    1.子组件页面结构 //NoticesMarquee 组件 <view v-for="(item, index) in tempList" :key="index& ...

  8. React系列之--props属性

    版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain地址:http://www.jianshu.com/p/fa81cebac3ef本文出自TigerC ...

  9. A Bite Of React(2) Component, Props and State

    component component:用户自己定义的元素 const element = <Welcome name="Sara" />; class Welcome ...

随机推荐

  1. power designer和uml应用

    1.power designer和uml应用,它们可以帮助我们画图power designer还能在画图时帮助你完成代码.对于新手是很合适的一个画图工具, 2.这就是power designer 的示 ...

  2. 1.2 Percona XtraDB Cluster Limitations

    摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...

  3. ES6之新增let命令使用方法

    let命令的用法 let是es6中的声明一个变量的命令,只在它声明的代码块中有效,出了这个代码块就会报错.也非常适合for循环,在循环中i的值只在循环语句中生效,在外边取不到的. var命令声明的是一 ...

  4. Python抓取远程文件获取真实文件名

    用urllib下载远程文件并转存到hdfs服务器,在下载时,下载地址中不一定包含文件名,需要从连接信息中获取. 1 file_url = request.form.get('file_url') 2 ...

  5. HDU 4508 湫湫系列故事——减肥记I

    原题链接:点击此处 解题思路: 思路与01背包差不多,思路用二维数组表示: dp[i][v]=max{dp[i-1][v-k*b[i]]+k*a[i]|0<=k*b[i]<=v} 其dp( ...

  6. Go语言管道

    Channel概念 Channel 是Go中的一个核心类型,你可以把它看成一个管道.Channel是引用类型,操作符是箭头 <- . Channel 是 CSP 模式的具体实现,用于多个 gor ...

  7. Mac下使用Wine安装Xshell 4和Xftp 4

    下载: (链接: https://pan.baidu.com/s/1o78qisM 密码: 79sq) 安装: 1.安装Wine 参考:http://www.cnblogs.com/EasonJim/ ...

  8. word-wrap/word-break/white-space

    word-wrap语法: word-wrap : normal | break-word normal : 默认值,单词如果单词超长,会冲出边界(单个单词超长,在当前行显示) break-word : ...

  9. Linux 下使用yum 命令安装MySQL

    Linux下使用yum安装MySQL,以及启动.登录和远程访问MySQL数据库. 1.yum安装mysql 1. 查看有没有安装包:   yum list mysql*    #移除已经安装的mysq ...

  10. dip,px,sp区别及使用场景

    1.区别 dip(device independent pixels)——设备独立像素:这个和设备硬件有关,一般哦我们为了支持WCGA.HVGA和QVGA推荐使用这个,不依赖于像素.等同于dp. px ...