网站建设资讯

NEWS

网站建设资讯

react路由返回时不刷新如何解决

这篇文章主要介绍“react路由返回时不刷新如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react路由返回时不刷新如何解决”文章能帮助大家解决问题。

创新互联公司是一家专注于成都网站制作、成都做网站与策划设计,顺平网站建设哪家好?创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:顺平等地区。顺平做网站价格咨询:18982081108

react路由返回时不刷新的解决办法:1、在路由组件上最上层元素上加一个key增加路由的识别度;2、将key绑定在路由顶层元素上,精确定位路由;3、使用withRouter关联下组件即可。

react 跳转后路由变了页面没刷新的解决方案

最近在学习React的过程中遇到了路由跳转后页面不刷新的问题,本文就详细的介绍一下解决方法,需要的朋友们下面随着小编来一起学习学习吧

问题

这样的问题貌似原因还挺多的,我的问题是带参数的url不能刷新,router 5.0版本 ,使用withRouter关联组件进行页面跳转

如下所示

react路由返回时不刷新如何解决

路由代码

react路由返回时不刷新如何解决

解决方案

在路由组件上最上层元素上加一个key增加路由的识别度,因为普通的跳转是根据path来识别的,但是path带上参数时,路由无法精确识别。不过,在跳转页面的时候,每个地址都会在localtion对象里添加一个key。如下打印

// 组件挂载
 componentDidMount() {
   console.log(this.props.location);
 }

react路由返回时不刷新如何解决

我们将这个key绑定在 路由顶层元素上就能精确定位路由了

render() {
   return (
     {/*就是这个key*/}
     
         
           
           
           
           
           
           
           
           
           
           
         
     
   );  }

然鹅,可能你发现 this.props为{} 空对象

那可能是因为你没有使用withRouter关联组件,关联一下就好了。注意一点,app.js无法关联,withrouter只能关联路由组件或者app.js的子组件

import React, { Component } from "react";
import {withRouter } from "react-router";
 
class routers extends Component {
 /**
  * 生命周期函数
  */
 // 组件挂载
 componentDidMount() {
   console.log(this.props.location);
 }
 render() {
   return (
     
     
   );  } } export default withRouter(routers);

关于“react路由返回时不刷新如何解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


标题名称:react路由返回时不刷新如何解决
文章位置:http://njwzjz.com/article/gdcjgo.html

其他资讯