转自:

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. AssertJ断言系列-----------<数据库断言三>

    其实,是有很多种数据断言的使用.那么,我们在接口的测试中,到底应不应该加上数据库断言呢?我的观点是,视情况而定:某一些特殊的场景或者特殊的业务,那么我们就一定要加上数据库断言.不是我们测试人员,不相信 ...

  2. leetcode-686-Repeated String Match(重复多少次A能够找到B)

    题目描述: Given two strings A and B, find the minimum number of times A has to be repeated such that B i ...

  3. windows任务管理器所查的网站

    添加menu   https://blog.csdn.net/u012273127/article/details/71293088 点击菜单打开对话框  https://blog.csdn.net/ ...

  4. E - Guess the Root 拉格朗日差值法+交互

    题目传送门 题意:告诉你存在一个未知项系数最高为10的$f(x)$,你最多可以有50次询问,每次询问给出一个$x'$,系统会返回你$f(x')$的值,你需要猜一个$x''$,使得$f(x'')=0$, ...

  5. [Xamarin] 透過 IsolatedStorageFile儲存資料(转帖)

    開發手機App通常都會遇到想要儲存資料的,舉個例來說,像是 (圖片來源:http://docs.xamarin.com/guides/android/application_fundamentals/ ...

  6. try -catch-finally一些要点

    try -catch-finally是处理程序异常时使用,当程序正常时,先走try然后到finally语句,不正常时:程序先走try,然后到catch里面的语句,最后到finally;从上面可以看出, ...

  7. hibernate多对多单向关联

    多对多单向,一个学生可以有多个老师,一个老师也可以教多个学生.老师可以找到他的学生,学生找不到教他的老师. 老师类Teacher: package com.oracle.hibernate; impo ...

  8. 解决windows10下总是很快自动黑屏进入睡眠问题

    在用win10的过程中总是过几分钟不操作电脑,就自动黑屏睡眠了. 下面讲解一下如何解决这个问题: 第一步:win +r  输入regedit.exe 运行注册表管理器 第二步:定位到 HKEY_LOC ...

  9. 关系型数据库MySQL多实例

    简介 MySQL数据库是一个中小型关系型数据库管理系统,软件开发者为瑞典MySQL AB公司.在2008年1月16号被Sun公司收购后Sun公司又被oracle公司收购.目前MySQL被广泛地应用在I ...

  10. Java PrepareStatement

    1.PreparedStatement是预编译的,对于批量处理可以大大提高效率. 也叫JDBC存储过程2.使用 Statement 对象.在对数据库只执行一次性存取的时侯,用 Statement 对象 ...