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

 更新时间:2023年03月11日 15:03:43   作者:checkMa  
这篇文章主要介绍了react跳转后路由变了页面没刷新的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

问题

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

如下所示

路由代码

解决方案

在路由组件上最上层元素上加一个key增加路由的识别度,因为普通的跳转是根据path来识别的,但是path带上参数时,路由无法精确识别。

不过,在跳转页面的时候,每个地址都会在localtion对象里添加一个key。

如下打印

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

我们将这个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如何自定义轮播图Carousel组件

    React如何自定义轮播图Carousel组件

    这篇文章主要介绍了React如何自定义轮播图Carousel组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • react基于react-slick实现多图轮播效果

    react基于react-slick实现多图轮播效果

    React slick是一个使用React构建的轮播组件,下面这篇文章主要给大家介绍了关于react基于react-slick实现多图轮播效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • React如何优雅的捕获异常

    React如何优雅的捕获异常

    捕获异常是来定位你错误代码的。本文主要介绍了 React如何捕获异常,你知道多少种方法,ErrorBoundary,ErrorBoundary-try-catch等等。本文就来详细的介绍一下
    2021-06-06
  • React项目开发中函数组件与函数式编程关系

    React项目开发中函数组件与函数式编程关系

    函数组件和函数式编程究竟是什么关系呢?本文会围绕这个话题展开讲解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • react+antd动态增删表单方式

    react+antd动态增删表单方式

    这篇文章主要介绍了react+antd动态增删表单方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • react+ant design实现Table的增、删、改的示例代码

    react+ant design实现Table的增、删、改的示例代码

    这篇文章主要介绍了react+ant design实现Table的增、删、改的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • React Hooks 实现的中文输入组件

    React Hooks 实现的中文输入组件

    这篇文章主要为大家介绍了React Hooks实现的中文输入组件示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • React Native中原生实现动态导入的示例详解

    React Native中原生实现动态导入的示例详解

    在React Native社区中,原生动态导入一直是期待已久的功能,在这篇文章中,我们将比较静态和动态导入,学习如何原生地处理动态导入,以及有效实施的最佳实践,希望对大家有所帮助
    2024-02-02
  • webpack4+react多页面架构的实现

    webpack4+react多页面架构的实现

    webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多。这篇文章主要介绍了webpack4+react多页面架构的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 基于React实现下拉刷新效果

    基于React实现下拉刷新效果

    这篇文章主要介绍了如何基于react实现下拉刷新效果,在下拉的时候会进入loading状态,文中有详细的代码示例供大家参考,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-03-03

最新评论