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开发进阶redux saga使用原理详解

    React开发进阶redux saga使用原理详解

    这篇文章主要为大家介绍了React开发进阶redux saga使用原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 为react组件库添加typescript类型提示的方法

    为react组件库添加typescript类型提示的方法

    这篇文章主要介绍了为react组件库添加typescript类型提示,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 关于react ant 组件 Select下拉框 值回显的问题

    关于react ant 组件 Select下拉框 值回显的问题

    这篇文章主要介绍了关于react ant 组件 Select下拉框 值回显的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Taro React自定义TabBar使用useContext解决底部选中异常

    Taro React自定义TabBar使用useContext解决底部选中异常

    这篇文章主要为大家介绍了Taro React底部自定义TabBar使用React useContext解决底部选中异常(需要点两次才能选中的问题)示例详解,有需要的朋友可以借鉴参考下
    2023-08-08
  • 原生实现一个react-redux的代码示例

    原生实现一个react-redux的代码示例

    这篇文章主要介绍了原生实现一个react-redux的代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • react 实现图片正在加载中 加载完成 加载失败三个阶段的原理解析

    react 实现图片正在加载中 加载完成 加载失败三个阶段的原理解析

    这篇文章主要介绍了react 实现图片正在加载中 加载完成 加载失败三个阶段的,通过使用loading的图片来占位,具体原理解析及实现代码跟随小编一起通过本文学习吧
    2021-05-05
  • React使用Hooks从服务端获取数据的完整指南

    React使用Hooks从服务端获取数据的完整指南

    本文将从基础到高级用法,详细介绍如何在 React 项目中优雅地使用 Hooks 进行服务端数据获取,涵盖错误处理、加载状态、性能优化等核心场景,并提供可直接复用的代码模板,需要的朋友可以参考下
    2025-03-03
  • React组件通信的实现示例

    React组件通信的实现示例

    在React中,组件通信是一个重要的概念,它允许不同组件之间进行数据传递和交互,本文主要介绍了React组件通信的实现示例,感兴趣的可以了解一下
    2023-11-11
  • 详解如何在React函数式组件中使用MobX

    详解如何在React函数式组件中使用MobX

    MobX 是一个简洁的状态管理库,它通过透明的函数响应式编程(TFRP)使得状态管理变得简单和可扩展,下面就跟随小编一起来了解一下如何在React函数式组件中使用MobX吧
    2024-01-01
  • React-native桥接Android原生开发详解

    React-native桥接Android原生开发详解

    本篇文章主要介绍了React-native桥接Android原生开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论