解决React编程式导航无法跳转：react router Cannot read properties of undefined (reading ‘push‘)

原创 已于 2022-11-28 23:08:46 修改 · 883 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #javascript #前端

于 2022-11-15 22:06:03 首次发布
在React应用中，当尝试从子组件内部进行路由跳转时，直接使用`this.props.history`可能会导致报错，因为此时`this.props`可能未定义。解决这个问题的方法是通过高阶组件`withRouter`来包裹子组件，以确保组件能访问到路由相关的方法。这样做之后，子组件便可以正常进行路由跳转了。

使用router过程中在子组件想进行路由跳转，使用this.props.history报错，进一步调试发现this.props为undefined,查阅文档得知

没办法通过 this.props.children 取得当前组件的子元素。 因为this.props.children 返回的是组件拥有者传递给你的 passed onto you 子节点。

解决方法：（withRouter）

使用withRouter包裹当前组件

然后就可以跳转了！ 

React中编程式导航报：index.js:25 Uncaught TypeError: Cannot read properties of undefined (reading ‘push‘)
weixin_45224165的博客
11-27 1415
Uncaught TypeError: Cannot read properties of undefined (reading 'push')
Cannot read properties of undefined (reading ‘push‘)
Zwq8023520的博客
08-14 7294
Cannot read properties of undefined (reading 'push')
react 路由跳转报错TypeError: Cannot read property ‘props‘ of undefined
weixin_46264539的博客
05-22 1373
react 路由跳转报错TypeError: Cannot read property ‘props’ of undefined handleGoReg() { console.log(this.props); this.props.history.push("./register") } 原因是没有给函数绑定this，函数内部引用this的时候无法解析出this，也就得不到this的属性props了。 解决方法1：在组件的构造函数constructor中添
React-路由跳转-Cannot read property ‘push‘ of undefined
Cao_Mary的博客
04-21 1225
报错：Cannot read property ‘push’ of undefined 问题描述：使用history的push方法手动跳转路由。结果报错push方法undefined了 this.props.history.push('地址') 问题原因： 如果一个组件是通过路由创建的, 那么系统就会自动给这个组件传递一个history对象。但是如果一个组件不是通过路由创建的, 那么系统就不会给这个组件传递一个history对象，history对象都找不到了，那push方法自然就报错undefined 解
TypeError: Cannot read properties of undefined (reading ‘push‘) ——原因react history.push组件中没有history
m0_46365130的博客
10-10 1095
2、通过注册了路由的页面传到组件中。1、使用withRouter解决。
react.js Hooks路由跳转和 react Cannot read property ‘push‘ of undefined报错解决
weixin_45621877的博客
09-19 915
Hooks跳转 一开始我直接在 关键代码3 的位置用 props.history.push(’/index’) ，直接报错react Cannot read property 'push' of undefined 搜了很多资料都是关于 父组件中的子组件的跳转报错，跟我的不一样，我这个没有父子关系 最后用如下的代码解决 主要3步 import { useHistory } from "react-router-dom"; //关键代码 1 let history = useHistory(); //关
Uncaught TypeError: Cannot read properties of undefined (reading 'push') 怎么解决
最新发布
09-18
首先，用户正在查询错误“Uncaught TypeError: Cannot read properties of undefined (reading 'push')”的解决方法。这是前端开发中常见的错误，尤其是在 Vue 或 React 等框架中处理路由时。 来自系统指令： - ...
react中Cannot read properties of undefined (reading 'colorPrimary')
09-02
- *3* [解决React编程式导航无法跳转：react router Cannot read properties of undefined (reading ‘push‘)](https://blog.csdn.net/m0_72919073/article/details/127875008)[target="_blank" data-report-click=...
路由跳转 Cannot read properties of undefined (reading 'push')
07-28
对于路由跳转出现 Cannot read properties of undefined (reading 'push') 的问题，这通常是因为您在没有正确初始化或配置路由器的情况下尝试使用路由跳转功能。 首先，请确保您已正确安装并配置了路由器。如果您...
React踩坑日记React启动后报错TypeError Cannot read properties of undefined (reading ‘forEach‘)
m0_54854317的博客
03-08 1478
前言今天创建新项目运行后又出现这个问题了，之前也出现过，觉得是很正常的情况，不过我今天发现还有许多朋友不知道这个问题的解决方法，特地来记录一下。 话不多说 上图: 这个情况呢是由于你的浏览器安装了React-DevTools扩展程序的原因，安装这个东西是为了方便我们查看React元素和编译之后的一些代码，很多朋友是直接删除了，但是这不就等于是壮士断腕了嘛。解决方法如下: 1.进入项目中按照路径找到相应的文件 /node_modules/@pmmmwh/react-refresh-webpack-plugi
React报错 TypeError: Cannot read property ‘push‘ of undefined
Gamin
02-01 1246
在项目中，处理列表跳转详情时遇到了问题。初时代码如下： 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 路由 踩坑 编程式路由失效
胡乱选一个
05-28 2012
React 路由 踩坑 编程式路由失效 遇到的问题 当在路由组件里面使用函数式编程 路由时会无法跳转 但浏览器地址已经更改。 问题原因 书写了多个<BrowserRouter></BrowserRouter>标签导致 问题详细描述 首先我在App组件里面已经书写了<BrowserRouter></BrowserRouter>标签，然后我跳转到Message组件，在Message组件再次跳转时又写了一层<BrowserRouter><
react 路径跳转组件不跳转_react-router路由配置问题，无法跳转到预期的组件？
weixin_39696518的博客
12-22 1032
目前组件有三个：Login、Home、NoMatch404预期：访问:localhost:3000时自动跳到Login，登录成功自动跳到Home，如果输入localhost:3000/aaa应该跳到NoMatch404问题：所有跳转都被NoMatch404拦截了，请问该如何配置NoMatch404组件路由配置代码如下import React from 'react'import { HashRou...
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的...
解决React中路由跳转报错:Cannot read property ‘push’ of undefined
m0_60746894的博客
08-10 1333
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
react路由无法跳转（To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function）
weixin_43295106的博客
10-25 2440
//问题：每次提交表单成功后跳转路由都回马上返回登陆页（手机必定出现，pc不出现） //react提示error：Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEff
React报错（组件内使用路由）× TypeError: Cannot read property ‘push‘ of undefined （解决withRouter）
furfur-jiang的博客
10-17 1247
React报错（组件内使用路由）× TypeError: Cannot read property ‘push’ of undefined （解决withRouter） import {withRouter} from 'react-router-dom' //..... //导出时套外面 export default withRouter(Index)
handled by React Router default ErrorBoundary: TypeError: Cannot read properties of undefined (reading 'props')
08-19
</think>### 解决React Router默认ErrorBoundary的TypeError: Cannot read properties of undefined (reading 'props') 在React Router中，当使用默认的ErrorBoundary（错误边界）组件时，遇到`TypeError: Cannot ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小白的成长日记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值