react父组件调用子组件的路由跳转事件报错Cannot read property 'push' of undefined

最新推荐文章于 2025-06-24 09:10:24 发布

原创最新推荐文章于 2025-06-24 09:10:24 发布 · 1.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文探讨了在React应用中，父组件调用子组件进行路由跳转时遇到的常见错误——'Cannot read property 'push' of undefined'。通过具体代码示例，详细解释了如何正确传递history属性以实现子组件的路由跳转功能。

摘要

近来在做react demo的时候碰到在my的父组件中调用login子组件的路由跳转事件Cannot read property ‘push’ of undefined
这是我的父组件 my

class my extends React.Component {
    constructor(props) {  //构造函数
        super(props);
    }
    render() {
        return (
            <div>
                <Login/>
            </div>
        );
    }
}

父组件中的login子组件内的去注册方法

goRegister() {
        this.props.history.push('/my/register')
    }

这样直接使用时报错

问题出在这里：在父组件调用子组件定义的跳转事件时,要传递history

<Login history={this.props.history}/>

标签

#react

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

VanhomPeng

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

PHP+MYSQL宠物主题动态网页设计源码+数据库，大学生期末大作业，PHP课程设计

06-20

876

PHP+MYSQL宠物主题动态网页设计源码+数据库，大学生期末大作业，PHP课程设计提示：本文采用PHP对数据库进行操作：本文就介绍了PHP实现对MySQL数据库的增删改查操作基础内容。

1 条评论您还未登录，请先登录后发表或查看评论

Trae+雪球MCP，化身专业的股票分析师(玩转100个MCP系列第二弹)

最新发布

cpp加油站的专栏

06-24

473

大家好呀，我是程序员夏叶，深度AI编程使用者，专注于分享AI编程方面的使用技巧、经验以及前沿资讯，有兴趣的可以关注我的公众号，一起学习，共同进步。第二弹，使用Trae+雪球MCP，获取股票实时行情，分析股票走向等，写代码间隙看看股票价格，研究研究行情，哈哈。真的很不错呀，最关键的是，足够隐蔽，同事以为你在写代码，实际你在浏览股票行情，哈哈，感兴趣的可以试一下哦。说实话，沧州明珠这只股我算是砸手里了，不过还好买的不多，哈哈。

react.js Hooks路由跳转和 react Cannot read property ‘push‘ of undefined报错解决

weixin_45621877的博客

09-19

963

Hooks跳转一开始我直接在关键代码3 的位置用 props.history.push(’/index’) ，直接报错react Cannot read property 'push' of undefined 搜了很多资料都是关于 父组件中的子组件的跳转报错，跟我的不一样，我这个没有父子关系最后用如下的代码解决主要3步 import { useHistory } from "react-router-dom"; //关键代码 1 let history = useHistory(); //关

NodeCanvas v3.3.1.unitypackage

功能亮点-------------------------------------● 三个可完全切换的图形模块供你选择。● 具有所有预期专业功能的时尚而直观的可视化节点编辑器。（全部撤销/重做、放大/缩小、迷你地图、多选、复制、复制/粘贴、JSON 导入/导出、群组、注释等）● 图形、GameObject 和全局黑板变量，以创建可重复使用和以智能体为中心的参数行为。● 具有实例或静态属性和字段的数据绑定变量。● 使用 UNET 的网络同步变量 (Network Sync Variable)。（由于现已弃用 UNET，所以会将其替换为新的网络解决方案）● 预制件可覆盖的变量。● 自动转换不同的变量数据类型。● 支持所有变量类型开箱即用。● 跨所有数量的智能体的可重复使用行为图。● 所有三种图形模块之间的无缝子图形嵌套。（行为子树、子状态机、子对话树）● 完整的子图变量参数化和贴图。● 模块化动作和条件任务设计。● 条件反应行为树评估。● 有条件和基于栈的 FSM 过渡。● 丰富多彩和内容翔实的运行时可视化调试。● 节点/任务浏览器，用以搜索、收藏和

vue 路由跳转报错 Cannot read property ‘push‘ of undefined 可能的解决办法

KLW75

07-06

9213

vue 中跳转路由报错Cannot read property 'push' of undefined。请检查pages.json 和router/index.js 两个文件中是不是有你填写的路径。在 router/index.js 文件中要 path 必须跟pages.json中的地址对应前面必须有/符号 { path: '/pages/index', name: 'index', }, pages.json文件中 { "p...

解决React中路由跳转报错:Cannot read property ‘push’ of undefined

m0_60746894的博客

08-10

1367

React中路由跳转报错: 页面在Router中配置了,但组件无法使用 this.props.history.push() 进行跳转,并且会出现报错：Cannot read property ‘push’ of undefined 得到 push of undefined 的报错因是为组件并没有使用 history 的能力解决方案: 1)给组件添加路由 //引入withRouter import {withRouter} from 'react-router-dom' class Subject ext

this.$router.push 提示错误 Cannot read property ‘push‘of undefined

zilvzsy的博客

06-30

4061

记笔记，免忘记！方便自己后续查阅！问题如下图：因为我这里是等待两个请求请求完成后再执行跳转方法，所以代码如下： setTimeout(function(){ localStorage.removeItem('taskQuery'); this.$router.push({path:'/configure'}) },1000) 但是运行之后，报错..

修复react-native PanResponder包裹的子元素点击事件无法响应

qq_26889291的博客

01-10

1258

https://stackoverflow.com/questions/47568850/touchableopacity-with-parent-panresponder

react跳转路由报错Cannot read property ‘push’ of undefined

热门推荐

大师兄

04-23

2万+

原文链接:https://dsx2016.com/?p=470 ➢ 跳转路由 /path是要跳转的路径 this.props.history.push(`/path`); ➢error 当点击跳转的时候,控制台报错 Cannot read property 'push' of undefined ➢ 问题本次遇到的问题是在首页home点击子组件bottomBar的...

this.props.history.push报错Uncaught TypeError: Cannot read property 'push' of undefined

github_38928905的博客

04-22

5720

情况：在app中引入了一个footerNav组件（路由也都引入了），然后在footerNav中点击按钮跳转，结果报错： Uncaught TypeError: Cannot read property 'push' of undefined 解决：方式1 通过propTypes将父组件app对象传入子组件footerNav import PropTypes from 'prop...

React报错（组件内使用路由）× TypeError: Cannot read property ‘push‘ of undefined （解决withRouter）

furfur-jiang的博客

10-17

1326

React报错（组件内使用路由）× TypeError: Cannot read property ‘push’ of undefined （解决withRouter） import {withRouter} from 'react-router-dom' //..... //导出时套外面 export default withRouter(Index)

报错：Cannot read property ‘push‘ of undefined

qq_42342276的博客

05-06

421

react-router-dom报错：Cannot read property ‘push‘ of undefined 在react项目中进行路由跳转 this.props.history.push('/accountManage'); 报错： Cannot read property ‘push‘ of undefined 解决方法： //导入withRouter import {withRouter} from 'react-router-dom' class AddAccount extends

React-路由跳转-Cannot read property ‘push‘ of undefined

Cao_Mary的博客

04-21

1292

报错：Cannot read property ‘push’ of undefined 问题描述：使用history的push方法手动跳转路由。结果报错push方法undefined了 this.props.history.push('地址') 问题原因：如果一个组件是通过路由创建的, 那么系统就会自动给这个组件传递一个history对象。但是如果一个组件不是通过路由创建的, 那么系统就不会给这个组件传递一个history对象，history对象都找不到了，那push方法自然就报错undefined 解

React报错 TypeError: Cannot read property ‘push‘ of undefined

Gamin

02-01

1385

在项目中，处理列表跳转详情时遇到了问题。初时代码如下： import React, { Component } from 'react' import { observer, inject } from 'mobx-react'; import { Wrapper, ModalWrapper, ScrollWrapper } from './style' import ContentReport from '../contentListReport'; @inject('base','construc

react中碰见父组件引入子组件，子组件无效的情况

zyj12138的博客

11-18

1064

就比如这样，你在父组件中引入了子组件内容，却发现无论怎么样都不亮（无效）原因在这里，在react中，引入标志名，必须第一个字母大写！！！当我们改成第一个字母大写的时候，就可以成功使用并代码高亮了。 ...

React 绑定 onClick 事件不生效问题分析，原来是绑定方法二不归！初学需注意

本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！

07-24

6230

复制粘贴的代码，没经过测试，你敢提交吗？是的，复制代码，如果觉得很简单，不想启动环境测试的话，最好的方法是目测，然后 SVN 比对分析，看看改了什么，有没有改完整。从以往的经验来看，无论复制什么代码，只要心里感觉太简单，有所松懈，就可能有坑！ ..................

Vue父子组件间Form：Cannot read properties of undefined (reading ‘resetFields’)报错原因以及处理方法

LiHuiJUNMate的博客

11-30

2506

vue antDesign form

vue父组件调用子组件报错：Cannot read properties of undefined

醉殇姒若梦遗年ツ的博客

09-15

3177

父组件中直接通过ref调用子组件（headTop）中的（hideTab）方法，在子组件中定义了这个方法，但是一直报undefined。最后通过加入判断解决，先判断子组件存在，然后再调用子组件中的方法。

vue-router中Cannot read property 'push' of undefined的问题

余_小凡的博客

03-27

2万+

方法1：在外部定义一个值指代Vue实例 var self = this; this.$http.get("login", { params: data }).then(function(response) { self.$router.push('index'); }).catch(function(response) { console.error(response)...

React踩坑：TypeError Cannot read property props of undefined

livingsu的博客

06-06

1万+

错误：点击按钮以后想要视情况跳转页面，但是用this.props.history.push()的时候报错TypeError: Cannot read property ‘props’ of undefined 错误原因：没有给函数绑定this，函数内部引用this的时候无法解析出this，也就得不到this的属性props了。解决方法：在组件的构造函数constructor中添加： this.函数名=this.函数名.bind(this) （注意函数名不能带括号） ...