首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

this.props.history.push未重新呈现react组件

this.props.history.push是React Router库中的一个方法,用于在React组件中进行页面跳转。

具体来说,React Router是一个用于构建单页面应用的库,它提供了一些组件和方法来管理应用的路由。其中,this.props.history是React Router提供的一个对象,包含了一些用于导航的方法,如push、replace等。

this.props.history.push方法用于将当前页面的URL替换为指定的URL,并导航到该URL对应的页面。它会将新的URL添加到浏览器的历史记录中,使得用户可以通过浏览器的后退按钮返回到之前的页面。

在React组件中使用this.props.history.push方法,通常需要先通过React Router的高阶组件(如withRouter)将history对象注入到组件的props中,然后就可以在组件中直接调用this.props.history.push方法进行页面跳转。

这个方法在React开发中非常常用,特别是在需要根据用户的操作进行页面跳转的场景下,如表单提交成功后跳转到成功页面、点击导航菜单跳转到对应的页面等。

推荐的腾讯云相关产品和产品介绍链接地址:

以上是腾讯云提供的一些与云计算相关的产品,可以根据具体需求选择适合的产品进行开发和部署。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 基础 | React怎么判断什么时候该重新渲染组件

    但是,React的智能仅此而已(目前为止),我们的任务是知道React的预期行为以及限制,这样我们才不会意外损失性能。 我们需要关注的一方面是React如何决定什么时候重新渲染组件。...组件获得新的状态然后React决定是否应该重新渲染组件。不幸的是,React难以置信简单地将默认行为设计为每次都重新渲染。 组件改变?重新渲染。父组件改变?重新渲染。...好吧,但是每次都重新渲染没有什么帮助。 我的意思是,我非常感谢React的细心谨慎。如果状态改变但是组件没有正确渲染的话更糟。权衡之下,每次都重新渲染绝对是一个安全的选择。...但是,React不能知道什么时候可以安全的跳过重新渲染,所以React无论是否重要每次都重新渲染。 我们如何告诉React跳过重新渲染? 那就是第二点要说的内容。...当React将要渲染组件时他会执行shouldComponentUpdate方法来看它是否返回true(组件应该更新,也就是重新渲染)。

    2.9K10

    React】归纳篇(十)组件间通信方式之Redux | UI组件AntDesign | Redux-react

    (即:页面地址的跳转都是在浏览器端实现的,不会去重新请求服务端获取 html,html 只是在应用初始化的时候加载一次。)...2种路由跳转的方式 用js方式,非标签方式: push()方式,默认方式 replace()方式 this.props.history.push/replace/goBack/goForward this.props.match...内部维护: state、 reducer 核心方法: getState()获取状态;dispatch(action)分发事件,会触发Reducers调用;subscribe(listener)发布,重新渲染组件...: 使用Provider组件对dispatch、subscribe、getState…进行全局管理 React-Redux 将所有组件分为两大类 UI组件 只负责UI的呈现,不带有任何业务逻辑...通过props接收数据,一般数据和函数 不使用任何Redux的API 一般保存在components文件下 容器组件 负责管理数据和业务逻辑,不负责UI的呈现 使用Redux的APi 一般保存在

    24930

    React路由学习

    1.安装react-router-dom $ npm i react-router-dom --save 2.在页面进行引入 import {BrowserRouter as Router,Route,...Link} from 'react-router-dom' 3.编写两个无状态的路由组件 // 声明路由组件 一个func 相当于是一个路由组件  // 这里是无状态路由的写法 实际工作中会把路由组件单独的写成一个...路由传递的值  componentDidMount(){ let ReadID = this.props.match.params.id         console.log(ReadID) } 3.重新设置...的值可以在声明周期中使用this.setState({}),前提是设置的数据需要在state中声明好 4.路由的重定向 引入RediRect import {Link,Redirect } from 'react-router-dom...' 编程式重定向 this.props.history.push('/home/') 标签重定向 在render最外层标签中写入   路由的嵌套 1.在子路由中建立孙路由直接引入即可

    78410

    react学习笔记之react-router4.x中JS路由跳转

    react开发单页应用的时候,有时我们需要通过js触发路由的跳转而不是紧紧通过Link组件链接跳转。...针对上面的两种情况,就有两种路由跳转场景,第一种:在中间中触发路由跳转,第二种:在非Component组件的js中触发路由跳转,这两种场景的跳转方法分别为: 一,组件中跳转到另一个路由组件: 从react-router-dom...中导入withRouter方法 import { withRouter } from 'react-router-dom'; 使用withRouter方法加工需要触发路由跳转的组件 export default...this.props.history.push('/home'); 二,非组件JS函数中触发路由跳转 从history中导入createHashHistory方法(如果您的react应用使用的是history...createHashHistory } from 'history'; // 如果是hash路由 import { createBrowserHistory } from 'history'; // 如果是history路由 React-Router

    1.1K10

    React-Router-手动路由跳转

    您将学习如何使用React Router提供的useHistory或useNavigate钩子(或者类似的方法,取决于您的React Router版本)来获取路由导航的函数,并如何在组件内部触发路由跳转...通过 push 方法修改资源地址即可更改 App.js 的路由模式为 BrowserRouter 然后在更改 Discover.js 的按钮点击事件的实现方法代码即可:btnClick() { this.props.history.push...history 对象, 所以不能在根组件中使用手动路由跳转,如果一个组件是通过路由创建的, 那么系统就会自动给这个组件传递一个 history 对象,但是如果一个组件不是通过路由创建的, 那么系统就不会给这个组件传递一个...history 对象,如果现在在非路由创建出来的组件中使用 history 对象, 那么可以借助 withRouter 高阶组件,只要把一个组件传递给 withRouter 方法, 那么这个方法就会通过路由将传入的组件创建出来...component={Other}/> ) } btnClick() { this.props.history.push

    39830

    React-keeper的使用方法(坑多)

    1.安装react-keeper $ npm i react-keeper --save 2.在项目中进行引入 import { HashRouter,Route,Link } from 'react-keeper...' 配置路由 注意:在使用react-keeper时,通过react-keeper引用的组件(Route,Link)都必须在HashRouter包裹之中,            并且HashRouter...cache='root'(或cache)为永久缓存,只要根组件不解绑,页面将永久缓存。 cache='parent'为父组件缓存,在父组件不解绑的情况下会维持缓存状态。...3.路由跳转与传参 引入Control import { Control } from 'react-keeper' 回到上一页 Control.go(-1) 也通过这样跳转,并传递参数  Control.go...("bookInfo",{ID:ID}) 接收参数 Control.state.ID 传统方式:      this.props.history.push({              pathname

    69910

    react-react-dom v6 知识整合

    bug收集:专门解决与收集bug的网站 网址:www.bugshouji.com 组件在项目开发过程经常发生变化,如:react-router-dom 今天为大家分享关于:React-router-dom...replace 属性也可以省略,不过行为由 replace 改为 push replace vs push this.props.history.push('router地址')...this.props.history.replace('router地址') replace: a-b-c 回不到上一级 适用于登录后,不需要重新回到登页面 replace...使用Outlet组件组件是一个占位符,告诉 React Router 嵌套的内容应该放到哪里。...-1)后退到前一页,使用navigate(-2)后退到前一页的前一页,navigate(1)前向导航, 注:V5版本中的编程式路由导航 this.props.history.replace() 与 this.props.history.push

    6.4K20
    领券