react中子组件取不到this.props.history

最新推荐文章于 2022-11-06 20:26:24 发布
转载 最新推荐文章于 2022-11-06 20:26:24 发布 · 6.9k 阅读 · 0
文章标签：

#react

本文介绍了一种在React组件中通过contextTypes访问this.props.history的方法，解决了被react-redux的connect高阶组件包裹后无法直接获取history对象的问题。

之前写react的时候发现被react-redux的connect包裹的子组件取不到this.props.history这个对象，可是我又的确需要这个对象怎么办？

 

解决办法也很简单，首先你需要这个

import PropTypes from 'prop-types'

然后

 

你的组件.contextTypes = {
  router: PropTypes.object.isRequired
}

然后你就可以取到了

console.log(this.context)

转载：https://blog.youkuaiyun.com/sanstu/article/details/80080002

经常问到的前端面试题
liuhao9999的博客
10-09 659
JS相关 JS原型及原型链 functionPerson(){} Person.prototype.name='Zaxlct'; Person.prototype.sayName=function(){ alert(this.name); } varperson1=newPerson(); //JS 在创建对象的时候，都有一个__proto__的内置属性，用于指向创建它的构造函数的原型对象。 //每个对象都有__proto__属性，但只有函数对象才有prototype...
React学习笔记--进阶之路
JackieDYH的博客
08-12 787
react框架 * react是facebook内部的一个javascript类库，用于构建用户界面的 JavaScript 库 react官网：https://react.docschina.org/ react不是一个完整的MVC框架，最多可以认为是MVC中的V（View） react引入了虚拟DOM机制 react引入了组件化思想 react使用facebook专门为其开发的一套语法糖--jsx 使用注意事项-jsx语法 注意事项 jsx语法 * 标签内容内属性 例如 *
react组件获取不到this.props.history怎么办？
weixin_46344410的博客
08-31 2285
###将方式一改写成方式二即可 //方式一 <Route path="/"> <Home/> </Route> //方式二 <Route path="/" component={Home}> </Route>
解决react的子组件没有history的问题
weixin_36706903的博客
09-11 1586
//子组件中引入 import {withRouter} from "react-router-dom"; //暴露的时候 Aggrid是自己的组件 export default withRouter(Aggrid) //这样就能拿到this.props.history了
React 初学笔记要点(父子组件 this stae )
zlzbt
07-16 367
首先要讲的就是 react强调的思想是面向数据编程 ，React 的核心思想是组件化的思想 跟着视频从头又把react学习了一遍，巩固了一下基础下面就来说一下在学习过程中认为比较重要的点吧 1：什么是组件 组件被我简单的理解成 就是类 。自定义的一个组件必须要继承react的组件 即React.Component 才能变成react的一个组件，这是规定没有原因 classTodoListextendsReact.Component{} export default TodoList; ...
React——props.history 是 undefined
weixin_43848532的博客
05-16 1382
用 withRouter 包裹导出 import { withRouter } from 'react-router-dom' export default withRouter(XXX);
react常见面试题
weixin_54565651的博客
11-06 279
react常见面试题
React-Router6版本的更新引起的路由用法变化
sdasadasds的博客
01-18 2768
React Router应该是React生态系统中最受欢迎的库了，npm周下载量达600w+，github也有45.2k的加星，足以说明它是一款非常优秀的库，作为React社区重要的库，它经历了多次迭代和重大更改，就在上个月，更是迎来了一个大的正式版更新6.x，当前最新为6.0.2，相对比于之前的5.x版本做出了较大改变，不管从用法还是从性能上都有了明显的提升，本文也将用新老版本对比的方式让你能以最快的速度上手新用法 话不多说，先列出6.0做出的改变之处： 用法变化 替换为 嵌套路由新写法 推出全新hoo
dva + react hooks实战Demo
brokenkay的博客
06-21 8070
前言 dva 是一款轻量级的应用框架,是阿里旗下的开源产品.dva是基于redux和redux-saga的数据流方案,然后为了简化开发体验，dva 还额外内置了react-router和fetch.写过原生redux代码的同学应该体会的到,redux里面充斥着大量的样板代码,对开发者而言使用体验十分的不友好.而dva将这些繁杂的工作封装到了底层去实现,开发者只需要调用它提供的几个简单Api就能实现完全相同的功能,从而大大的提升了开发效率. 本篇博文将从实战的角度将dva和目前流行的reac...
react-router中this.props.history为undefined?解决报错Cannot read property ‘push‘ of undefined
zrq1210的博客
11-02 6125
在使用this.props.history.push(’/xxx’)的时候遇到这个报错： 大概率原因： 只有用了Route组件，才会在子组件中注入route props(即 history, location, match) 详见官方文档route props 所以下面这个例子中， Header 和 Footer组件中，this.props.history === undefined， 在ModuleA 和 ModuleB中，this.props.history就有值（因为有< Route >
this.props.history.push报错 “push”，“go”...未定义
weixin_45901735的博客
06-18 747
我实际开发碰到过很多次，结果打印了this.props 在组件中打印出了 history记录，在app.js中打印出来却是loaction记录,因为是一开始，路由没跳转，也没有记录 所以 建议不要再开始文件 app.js文件中使用this.props.history.push()或者go等等方法 （react.js高阶路由坑之一） 走波关注 谢谢 ...
封装使用组件的过程中打印this.props发现history属性为空，不能进行路由跳转
rfalcon的博客
03-10 420
问题图片 解决 导入withRouter，组件导出时使用withRouter包裹 import { withRouter } from 'react-router-dom' export default withRouter(Counter) 这时候后台就会出现相关信息：
当React在 this.props 中找不到 history 时
why404
07-02 2111
在 React 中正常来说只有在 包裹的组件中才能在 this.props 属性中找到 history 对象 但有些情况下我们就是希望在一个没被 包裹的组件中用到 history 对象，比如：异步加载数据后跳转 网上有些方法提到可以在 class 前加上 @withRouter 的修饰 import { withRouter } from 'react-router-dom' @withRouter class ... 这种做法有时候会出现 Support for the e...
关于react props获取不到的问题
weixin_42444137的博客
12-08 2714
这几天做一个路由跳转，发现跳转过后不能拿到props的值，发现我是在component里面还放了一个页面，这样子会让props初始化拿不到值，切记！！！！
React中的props.history
lossatsea的博客
06-29 7927
React组件中经常会用到this.props.history.push来进行页面的跳转，关于props.history，在项目里使用过程中有遇到一些相关的问题和知识，在这里记录一下。 下面为history的属性： history.push 就像上面所说的，history.push经常会用来进行页面的跳转，当然前提是在路由中有写url对应的界面组件，比如在登录页面中要跳转到主界面，首先在路由中规...
使用React Router遇到的困惑
aboutmn的博客
08-26 393
TypeError: props.history is undefined https://stackoverflow.com/questions/42857283/react-router-typeerror-this-props-history-is-undefined 这是因为React Router在4.0.0开始时发生了变化。 您现在应该在使用browserHistory时使用reac...
React中一般组件中使用this.props.history的路由跳转出现的问题以及解决方法
小多的博客
12-28 1996
TypeError:Cannot read property 'goBack' of undefined 或者TypeError:Cannot read property 'push' of undefined等 原因：在React中，一般组件没有history等方法，因为一般组件没有传值，props收到的是一个空对象，只有路由组件中才有 解决方法：使用withRouter，withRouter是专门解决一般组件中使用路由组件中的API的情况 在一般组件中引入import {withRouter} fro
this.props.history.jump
05-25
这段代码看起来像是使用了React Router的history对象的自定义方法。然而，React Router并没有...这样就可以在React组件中使用`this.props.history.jump('/new-page')`来跳转到新的页面，并且在跳转后滚动到页面顶部。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值