返回顶部
首页 > 资讯 > 前端开发 > JavaScript >react 跳转后路由变了页面没刷新的解决方案
  • 401
分享到

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

2024-04-02 19:04:59 401人浏览 泡泡鱼
摘要

目录问题解决方案问题 这样的问题貌似原因还挺多的,我的问题是带参数的url不能刷新,router 5.0版本 ,使用withRouter关联组件进行页面跳转 如下所示 路由代码

问题

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

在这里插入图片描述

路由代码

在这里插入图片描述

解决方案

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


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

在这里插入图片描述

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


 render() {
    return (
      {}
      <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 跳转后页面没刷新内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: react 跳转后路由变了页面没刷新的解决方案

本文链接: https://lsjlt.com/news/129351.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • react 跳转后路由变了页面没刷新的解决方案
    目录问题解决方案问题 这样的问题貌似原因还挺多的,我的问题是带参数的url不能刷新,router 5.0版本 ,使用withRouter关联组件进行页面跳转 如下所示 路由代码...
    99+
    2024-04-02
  • react跳转后路由变了页面没刷新的解决
    目录问题解决方案总结问题 这样的问题貌似原因还挺多的,我的问题是带参数的url不能刷新,router 5.0版本 ,使用withRouter关联组件进行页面跳转 如下所示 路由代码...
    99+
    2023-03-11
    react跳转 react路由变 react页面没刷新
  • react跳转后路由变了页面没刷新如何解决
    这篇文章主要介绍“react跳转后路由变了页面没刷新如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react跳转后路由变了页面没刷新如何解决”文章能帮助大家解决问题。问题这样的问题貌似原因还...
    99+
    2023-07-05
  • Vue路由this.route.push跳转页面不刷新的解决方案
    Vue路由this.route.push跳转页面不刷新 一、背景 介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新。 也就是vue生命周期函数没有执行(c...
    99+
    2024-04-02
  • react路由跳转不刷新如何解决
    这篇文章主要介绍了react路由跳转不刷新如何解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react路由跳转不刷新如何解决文章都会有所收获,下面我们一起来看看吧。react路由跳转不刷新的解决办法:1、在...
    99+
    2023-07-05
  • Vue路由this.route.push跳转页面不刷新怎么解决
    今天小编给大家分享一下Vue路由this.route.push跳转页面不刷新怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文...
    99+
    2024-04-02
  • react路由页面不刷新如何解决
    这篇文章主要介绍“react路由页面不刷新如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react路由页面不刷新如何解决”文章能帮助大家解决问题。react路由页面不刷新的解决办法:1、在“...
    99+
    2023-07-04
  • react跳转路由页面空白如何解决
    这篇文章主要讲解了“react跳转路由页面空白如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react跳转路由页面空白如何解决”吧!react跳转路由页面空白是因为写法错误,其解决办...
    99+
    2023-07-05
  • 如何解决Vue路由this.route.push跳转页面不刷新的问题
    这篇文章主要讲解了“如何解决Vue路由this.route.push跳转页面不刷新的问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何解决Vue路由this.route.push跳转页面...
    99+
    2023-06-20
  • react改变数组页面没有刷新如何解决
    本篇内容主要讲解“react改变数组页面没有刷新如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react改变数组页面没有刷新如何解决”吧!react改变数组页面没有刷新是因为数组的赋值是...
    99+
    2023-07-05
  • 如何解决angular2中router路由跳转navigate的使用与刷新页面问题
    这篇文章主要介绍如何解决angular2中router路由跳转navigate的使用与刷新页面问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、router.navigate的使...
    99+
    2024-04-02
  • vue3中addRoute路由变化页面未刷新问题解决
    路由变化了但页面没有更新 按着vue2的写法写vue3 发现路由变化了但页面没有更新 搜索了半天没有解决办法。 想了半天觉得是重复用同一个对象,vue为了节约性能就没有新建, 被vu...
    99+
    2024-04-02
  • vue项目中路由跳转页面不变问题及解决
    目录vue中路由跳转页面不变问题解决方法路由跳转页面不刷新、this.$router.go(-1)不生效解决思路vue中路由跳转页面不变 问题 今天在开发vue移动端项目的过程中发现...
    99+
    2022-11-13
    vue路由跳转 路由跳转页面不变 vue项目路由跳转
  • Vue路由跳转传参或打开新页面跳转问题怎么解决
    这篇文章主要介绍了Vue路由跳转传参或打开新页面跳转问题怎么解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue路由跳转传参或打开新页面跳转问题怎么解决文章都会有所收获,下面我们一起来看看吧。Vue路由跳转...
    99+
    2023-07-05
  • 如何解决vue路由变化页面数据不刷新的问题
    这篇文章给大家分享的是有关如何解决vue路由变化页面数据不刷新的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我...
    99+
    2024-04-02
  • React中路由参数如何改变页面不刷新数据的情况
    目录React路由参数改变页面不刷新数据的情况React页面路由前端路由和后端路由前端路由介绍匹配模式路由的执行过程hash模式history模式react-router-dom A...
    99+
    2022-11-13
    React路由参数 React页面不刷新数据 React路由
  • 浅谈uniapp页面跳转的解决方案
    目录1.uniapp常用跳转API2.微信小程序页面跳转API3.其他页面跳转回tabbar页面的方法4.页面来回跳转保持数据的方法正常的页面跳转的api大家应该都清楚,但是涉及到多...
    99+
    2024-04-02
  • 解决vue路由发生了跳转但是界面没有任何反应问题
    目录vue路由发生了跳转但是界面没有任何反应vue路由跳转界面的两种方式声明式导航编程式导航总结vue路由发生了跳转但是界面没有任何反应 vue 路由发生了跳转但是界面没有任何反应,...
    99+
    2023-05-17
    vue路由 vue路由跳转 vue路由跳转界面没反应
  • vue设置路由title,但刷新页面时title失效的解决
    目录1. 在router/index.js中2.在main.js中设置路由守卫具体操作如下同上在 router/index.js 中在项目的根目录下在main.js中引入并且使用该插...
    99+
    2024-04-02
  • Vue动态路由路径重复及刷新丢失页面问题的解决
    目录Vue动态路由路径重复及刷新丢失页面1.使用router.addRoutes(teacherRouter);2.问题3.问题Vue路由动态添加重复警告重复总结Vue动态路由路径重...
    99+
    2023-01-14
    Vue动态路由路径重复 Vue刷新丢失页面 Vue动态路由
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作