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开发中非常常用，特别是在需要根据用户的操作进行页面跳转的场景下，如表单提交成功后跳转到成功页面、点击导航菜单跳转到对应的页面等。

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

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse

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

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

React报错之无法在未挂载的组件上执行React状态更新

原文链接：https://bobbyhadz.com/blog/react-cant-perform-react-state-update-on-unmounted-component[1] 作者：Borislav...一个组件的状态只有在该组件被挂载时才会被更新。...div> State: {JSON.stringify(state)} ); }; export default App; 当我们试图更新一个未挂载的组件的状态时...，会出现"无法在未挂载的组件上执行React状态更新"的警告。...我们在useIsMounted钩子中跟踪组件是否被挂载，就像我们直接在组件的useEffect钩子中做的那样。

2.1K3 0

react-router-dom 实现路由跳转

简单的写了一个移动呈现，底部tabbar跳转的demo 简述 demo 使用 create-react-app 直接创建路由是使用 react-router-dom 目录结构稍微改变一下...index.js 中不做改变 App.js App.js 中使用 react-router-dom 检测地址检索 ‘/’ , ‘/views’ 两个路由 import React...from 'react'; import { HashRouter, Route, Redirect} from "react-router-dom"; import '....函数式跳转直接使用 this.props.history.push({ }) 参数参考 https://reacttraining.com/react-router/web/api/history...import React, { Component, Fragment } from "react"; import { Route, Redirect } from 'react-router-dom

6.2K5 0

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

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

2.8K1 0

React Native中FlatList组件不重新渲染Item解决方法

场景今天在写一个点击TouchableOpacity调用函数重新渲染图表的功能，一开始是点击之后图表可以正常切换但是TouchableOpacity颜色没有变化解决方法给FlatList指定

1.9K1 0

在React中如何使用history.push传递参数

在React中如何使用history.push传递参数主要有三种方式：第一种如下： this.props.history.push{undefined pathname:'/router/url/...oneFlag=one' 第二种情况如下： this.props.history.push{undefined pathname:'/router/url/send', state:{ 'oneFlag...第一种和三种在使用时要注意监听参数的变化，不然路由回退，再次进图另外参数的页面，组件不会重新渲染，用hook组件开发的话，需要用useEffect来监听参数变化。...以上便是react路由传递参数的三种方式，希望对你有所帮助。

19.8K2 0

【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 一般保存在

2253 0

React路由

文章目录 react路由 react路由的基本使用常用组件说明 BrowserRouter和HashRouter组件 Link组件 Route组件 NavLink组件 Switch组件 Routes组件...React路由简单来说，就是配置路径和组件(配对)。 ...组件包裹整个应用使用Link组件作为导航菜单（路由入口）使用Route组件配置路由规则和要展示的组件（路由出口） import React from 'react' import ReactDom...请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面，在处理相对路径方面的一些问题时，使用HashRouter可以解决。 ...组件就可以通过props拿到history import React from 'react' import ReactDom from 'react-dom' // 导入路由组件 import {

2.5K1 0

react 路由完整版「建议收藏」

home 封装标签后: 在标签上使用 {...this.props} 能将组件传递的参数...号表示为可选参数调用参数: this.props.match.params.参数名 8、动态跳转 this.props.history.push('路径'') /('路径',{参数键值对...('/home/msg/detail/5') 接收:{this.props.match.params.id} 方式二: 回调中:this.props.history.push('/home...接收:{this.props.location.state.id} 9、获取当前路由的url('/xx') this.props.location.pathname; 10、非路由组件使用路由组件属性...(props.history等) import {withRouter} from 'react-router-dom' 最后导出组件:export default withRouter(组件)

1.2K2 0

React 开发必须知道的 34 个技巧【近1W字】

id=12121212">xxx this.props.history.push({pathname:`/web/search?...第二参数为一个数组，里面的每一项是用来判断是否需要重新创建函数体的变量，如果传入的变量值保持不变，返回记忆结果。...props 2.16.x 之后使用getDerivedStateFromProps,16.x 以后componentWillReveiveProps也未移除 export default class Six...在V3 中的 routing 规则是 exclusive，意思就是最终只获取一个 route 4.V4 中的 routes 默认是 inclusive 的，这就意味着多个可以同时匹配和呈现..."; class App extends React.Component{ render(){ const authPath = '/login' // 默认未登录的时候返回的页面

3.4K0 0

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.在子路由中建立孙路由直接引入即可

7741 0

React-Router-集中式管理

路由统一管理(路由集中管理)现在虽然我们能通过路由实现组件切换, 但是现在我们的路由都比较分散, 不利于我们管理和维护，所以 React 也考虑到了这个问题, 也给我们提供了统一管理路由的方案。...button> {renderRoutes(routers)} ) } btnClick() { this.props.history.push...当中的 renderRoutes 方法将我们编写的 routers 进行注册，然后我们的一级路由与对应的组件的关系就关联起来了。...from 'react';import {NavLink} from "react-router-dom";import {renderRoutes} from 'react-router-config...renderRoutes(routers[4].routes) } ) } btnClick() { this.props.history.push

2274 0

React 开发要知道的 34 个技巧

id=12121212">xxx this.props.history.push({pathname:`/web/search?...第二参数为一个数组，里面的每一项是用来判断是否需要重新创建函数体的变量，如果传入的变量值保持不变，返回记忆结果。...props 2.16.x 之后使用getDerivedStateFromProps,16.x 以后componentWillReveiveProps也未移除 export default class Six...的一部分; 3.在V3 中的 routing 规则是 exclusive，意思就是最终只获取一个 route; 4.V4 中的 routes 默认是 inclusive 的，这就意味着多个; 可以同时匹配和呈现..."; class App extends React.Component{ render(){ const authPath = '/login' // 默认未登录的时候返回的页面

1.5K3 1

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.1K1 0

React的魅力: React-Router-集中式管理和Redux-核心概念

2630 0

react+redux+webpack教程4

react组件，所以用起来特别方便。...item.key = item.title item.onGotoDetail = () => { this.props.dispatch(chooseNews(i)) this.props.history.push...如果我们想在组件之外控制历史状态（比如action里），从react-router里引入browserHistory或hashHsitory直接用就可以。最后添加新闻详情页面的组件，这就很简单了吧。...一个很重要的原因就是网站不同于app，它要保证输入任何一个有效的url后都要给用户呈现出一个可用的页面。...然后添加路由，这个路由比较特殊，不是用Route，而要用个专门的组件IndexRoute，整个src/routes.js代码如下： import React from 'react' import {

1.8K10 0

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

3233 0

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.3K2 0

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

6761 0

React登录跳转遇到的问题

醉了环境： 1.React16 2.React Router v4 1.方法一这个方法完美解决。 ?...有问题直接评论 2.方法二当然，v4上 BrowserRouter 提供了 hisotry 对象，所以有了方法二.可以使用withRouter;API文档：https://reacttraining.com/react-router....then(function(req){ if(req ==='success'){ //登录成功跳转 this.props.history.push...} }.bind(this))//这里需要把this绑定，不然报错 } }) } 2）组件放入withRouter ...... import { withRouter...} from 'react-router-dom' ...... export default withRouter(Form.create({ mapPropsToFields(props) {

1.8K2 0

React-Router-URL参数

前言React Router 是 React 应用中常用的路由管理库，而 URL 参数则是它的一个关键概念。URL 参数允许您在路由之间传递数据，从而使您的应用程序更灵活和交互性更强。...key=value&key=value更改 App.js 的 Home 组件的路由跳转规则：import React from 'react';import Home from '....component={Other}/> ) } btnClick() { this.props.history.push...('/discover'); }}export default withRouter(App);更改 Home.js 组件的内容，处理 URL 传递过来的参数：import React from...'react';class Home extends React.PureComponent { constructor(props) { super(props);

2453 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云