2023react路由返回时不刷新怎么办

 所属分类:web前端开发

 浏览:178次-  评论: 0次-  更新时间:2023-01-10
描述:更多教程资料进入php教程获得。 react路由返回时不刷新的解决办法:1、在路由组件上最上层元素上加一个key增加路由的识别度;2、将key绑定...
更多教程资料进入php教程获得。

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

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react路由返回时不刷新怎么办?

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

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

问题

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

如下所示

5e0d5eb4e7dec7ac09594cf9e6167cd.jpg

路由代码

b438e8f1e45f639423b73d1dcb0cca0.jpg

解决方案

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

// 组件挂载
 componentDidMount() {
   console.log(this.props.location);
 }
登录后复制

ccf4d9823d05a5de15dd779eaa1d45a.jpg

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

render() {
   return (
     {/*就是这个key*/}
     <div key={this.props.location.key}>
         <Switch>
           <Route exact path="/" component={Home} />
           <Route exact path="/products/:id" component={Products} />
           <Route exact path="/about" component={About} />
           <Route exact path="/solution" component={Solution} />
           <Route
             exact
             path="/solutionDetails/:id"
             component={SolutionDetails}
           />
           <Route exact path="/download" component={Download} />
           <Route path="/about" component={Download} />
           <Route exact path="/details/:id" component={Details} />
           <Route path="/contact" component={Contact} />
           <Route component={ErrorPage} />
         </Switch>
     </div>
   );
 }
登录后复制

然鹅,可能你发现 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 (
     <div key={this.props.location.key}>
     </div>
   );
 }
}
export default withRouter(routers);
登录后复制

推荐学习:《react视频教程》

以上就是react路由返回时不刷新怎么办的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: react,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!