react（47）——通过调用this.props.history的方法来实现路由的Link组件功能，使用withRoute将非路由组件变为路由组件

最新推荐文章于 2023-10-19 17:17:04 发布

木子旭

最新推荐文章于 2023-10-19 17:17:04 发布

阅读量2.1k

点赞数

分类专栏： # react 文章标签： history javascript react 前端路由

本文链接：https://blog.csdn.net/qq_45895576/article/details/115042110

版权

1.this.props.history.push方法

this.props.history.push()该方法中的参数为Link组件的to属性，也可以传递state；

 this.props.history.push(`/Page2/Div1`)
 //等同于
 <Link to=`/Page2/Div1`></Link>

 this.props.history.push(`/Page2/Div1`,{
    id: 1, message:

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

木子旭

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

React的this.props.history.push() 报错解决方案

weixin_44205155的博客

11-03

3785

【问题】在使用React 库实现路由跳转时，出现了 cannot read property ‘push’ of undefined 【场景】左侧管理系统的菜单栏与右侧内容区域的联动。可以延伸到多种应用场景。【解决方案】 1 使用withRouter 1.1 项目安装 react-router-dom cnpm install react-router-dom --save-dev 1.2 引入高阶组件withRouter 在使用的组件中引用高阶组件 withRouter import React fr

React中的props.history

lossatsea的博客

06-29

7680

React组件中经常会用到this.props.history.push来进行页面的跳转，关于props.history，在项目里使用过程中有遇到一些相关的问题和知识，在这里记录一下。下面为history的属性： history.push 就像上面所说的，history.push经常会用来进行页面的跳转，当然前提是在路由中有写url对应的界面组件，比如在登录页面中要跳转到主界面，首先在路由中规...

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

React 常见面试题总结.pdf

02-23

React 常见面试题总结

使用react——解决this.props.history.push无法跳转的问题

weixin_30585437的博客

11-03

1360

转自： https://blog.csdn.net/yingzizizizizizzz/article/details/78751305 场景：一个组件中，含有ul展开数组的组件，在每一行中，都能点击相应的这一行，跳转到对应的页面。也就是说，组件套组件，子组件中this.props.history.push无法工作。提示没有push这个函数。因为这时的props中没有history...

React：关于this.props.history.push跳转失败的思考与解决

tuzi007a的博客

08-29

4463

大家好，我是梅巴哥er。本篇介绍关于页面跳转的问题。最近在练习一个项目，从登录页面，点击登录，跳转到主页。但是，写好了代码，怎么跳都跳不过去。请求的数据是能请求到的，能正常显示，页面也有跳转反应，但是一直不能跳转到主页。只是在登录页面打转转。简略代码如下： import axios from axios handleClick = () => { let params = { username: this.state.username, pa

React中一般组件中使用this.props.history的路由跳转出现的问题以及解决方法

小多的博客

12-28

1881

TypeError:Cannot read property 'goBack' of undefined 或者TypeError:Cannot read property 'push' of undefined等原因：在React中，一般组件没有history等方法，因为一般组件没有传值，props收到的是一个空对象，只有路由组件中才有解决方法：使用withRouter，withRouter是专门解决一般组件中使用路由组件中的API的情况在一般组件中引入import {withRouter} fro

react 路径跳转组件不跳转_react中为什么不window.location.href来跳转，还要用react-router来跳转...

weixin_39574943的博客

12-22

1899

展开全部作者：阮一峰日期：2016年5月25日真正学会React是一个漫长的过程。你会发现，它不是一个库，也不是一个框架，而是一个庞大62616964757a686964616fe4b893e5b19e31333365653165的体系。想要发挥它的威力，整个技术栈都要配合它改造。你要学习一整套解决方案，从后端到前端，都是全新的做法。举例来说，React 不使用 HTML，而使用 JSX ...

React路由 - 路由参数、withRouter组件、Router hooks、路由组件传参、Switch组件、Redirect重定向组件、动态路由

此鱼非闲鱼也的博客

07-15

4699

说动态路由之前，先看看路由参数都有哪些？ 1、路由参数 1-1、history 历史记录及路由给我们的一些操作路由是根据历史记录跳转视图 history对象中提供了很多方法，便于用户再浏览历史记录中跳转。 go() 方法可以回到历史记录中的某一页面，通过与当前页面相对位置来标志。当前页面的相对位置标志为0。go()方法中，传入一个参数，这个参数是一个整数，即在 history 记录中向前或者后退多少步。 history.goBack()方法可以回到历史记录中的上一个 URL。调用该方法的效果等价

react 路由详细讲解(1)

s_y_f_的博客

07-30

798

介绍: 今天学习了react的重点知识路由,这个知识点是react中的一大块,大家有兴趣的话可以跟随作者的文章继续学习呦 SPA的理解单页Web应用（single page web application，SPA）。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面，只会做页面的局部更新。数据都需要通过ajax请求获取, 并在前端异步展现。路由的理解 ① 什么是路由? 一个路由就是一个映射关系(key:value) key为路径, value可能是function或component ② 路

18 React 渲染数据注意事项、以及react-router4.x中使用js跳转路由

最新发布

03-01

16. **避免在事件处理器中直接修改状态**：总是通过调用setState方法来更新状态，而不是直接修改this.state。 17. **prop drilling**：当多个层级的组件需要共享数据时，可以考虑使用Context API或状态管理库来解决...

this.props.history填坑

weixin_43905830的博客

09-29

2995

项目场景： this.props.history填坑问题描述：今天在写路由跳转的时候发现当我点击跳转按钮时地址栏可以跳转到/我想要的路由下,但是组件加载不出来但是刷新后就可以了!可以正常加载 | |；原因分析： 1、首先我们要知道对于子组件他是获取不到this.props.history这个方法的 2、第一点解决后还有个坑，对于子组件是不能通过this.props.history跳转到父组件的下面我们通过实例来演示并解决解决方案： 1、怎么让子组件可以使用this.props.history这个

react 子组件 props.history.push 点击显示“push“underfind

小考拉的博客

09-02

725

问题描述 react 子组件 props.history.push 点击显示"push"underfind 原因分析：子组件没有接收到父组件传递的history 解决方案：在父组件里面向子组件传递一个history （history={props.history}）之后在子组件中进行接收 /* 父组件 */ // {...this.state} 向子组件传值 // history={props.history} 向子组...

react-router中this.props.history为undefined?解决报错Cannot read property ‘push‘ of undefined

zrq1210的博客

11-02

5832

在使用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 传参数 url、state 混合传参

AS_TS的博客

09-18

7912

1. url 传参一般跳转传递 id 都放入 url 中 this.props.history.push(`/document-analysis/fans-list?id=${this.state.bloggerId}`) 地址栏显示在跳转接收页 this.props.location 打印的路由参数 2. state 传参跳转时需要带其他较多数据，无法在 url 上携带，可以使用 state 传值 this.props.history.push({ pathname: `/document-a

使用react的使用this.props.history.push()报错

蓝枫秋千的踩坑记录

01-15

3793

使用react进行js方法进行路由跳转的时候,我一个组件要跳转到另外一个路由,但是使用this.props.history.push(“路径名”)的时候给我报错,从别的页面跳转回这里也没问题,去打印this.props是一个form对象,打印this.props.history的时候是undefined,说明父组件并没有传递一个history过来解决方法: 到父组件中传递一个this.props...

[react] this.props 中找不到 history

weixin_42698255的博客

08-06

5446

问题在用React开发时要通过this.props.history.replace('路径')跳转，在this.props却找不到.history 导致无法跳转。原因由于 React 中,只有在 <Route> 包裹的组件中,才能在 this.props 属性中找到 history 。解决方案第一种：直接用<Route> 进行包裹。（直接用，不说了）...

this.props.history.listen路由监听与取消监听

见贤思齐焉，见不贤内自省

02-21

2577

this.props.history.listen路由监听与取消监听

window.location.href和this.props.history.push

qq_26061565的博客

10-19

319

小结：到现在为止，我们发现有很多方式可以进行路由的跳转，他们之间的不同以及使用的限制和方式都需要进一步了解。链接：https://www.jianshu.com/p/a89151cbae86。

在antd 4.x中react.js调用父组件的this.props.form 进行重置表单

05-26

在 Antd 4.x 中，可以使用 `Form.useForm()` 方法来获取表单对象，然后使用表单对象的 `resetFields()` 方法来重置表单。具体操作步骤如下： 1. 在父组件中使用 `Form.useForm()` 方法获取表单对象，并将其传递给子组件。 ```jsx import { Form } from 'antd'; class ParentComponent extends React.Component { formRef = React.createRef(); render() { return ( <div> <ChildComponent form={this.formRef.current} /> </div> ); } componentDidMount() { this.formRef.current.resetFields(); } } export default Form.create()(ParentComponent); ``` 2. 在子组件中，通过 `props` 获取父组件传递的表单对象，并在需要重置表单时调用 `resetFields()` 方法。 ```jsx import { Button } from 'antd'; class ChildComponent extends React.Component { handleReset = () => { const { form } = this.props; form.resetFields(); } render() { return ( <div> <Button onClick={this.handleReset}>重置</Button> </div> ); } } export default ChildComponent; ``` 注意事项： - 在父组件中，需要将 `Form.create()` 包装的组件传递给 `Form.useForm()` 方法，才能获取到表单对象。 - 在父组件中调用 `resetFields()` 方法时，需要等到表单对象已经被渲染完成后再调用，否则可能会出现 undefined 的错误。可以使用 `componentDidMount()` 方法来保证表单对象已经被渲染完成。