react跳转页面并传参数(react 跳转后路由变了页面没刷新的解决方案)
类别:编程学习 浏览量:2200
时间:2021-10-28 10:36:45 react跳转页面并传参数
react 跳转后路由变了页面没刷新的解决方案目录
- 问题
- 解决方案
这样的问题貌似原因还挺多的,我的问题是带参数的url不能刷新,router 5.0版本 ,使用withRouter关联组件进行页面跳转
如下所示
路由代码
在路由组件上最上层元素上加一个key增加路由的识别度,因为普通的跳转是根据path来识别的,但是path带上参数时,路由无法精确识别。不过,在跳转页面的时候,每个地址都会在localtion对象里添加一个key。如下打印
// 组件挂载 componentDidMount() { console.log(this.props.location); }
我们将这个key绑定在 路由顶层元素上就能精确定位路由了
render() { return ( {/*就是这个key*/} <li 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> </li> ); }
然鹅,可能你发现 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 ( <li key={this.props.location.key}> </li> ); } } export default withRouter(routers);
到此这篇关于react 跳转后路由变了页面没刷新的解决方案的文章就介绍到这了,更多相关react 跳转后页面没刷新内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- react怎么绑定state(react纯函数组件setState更新页面不刷新的解决)
- react组件封装成函数方法(React虚拟列表的实现)
- react性能优化是哪个周期(React 并发功能体验前端的并发模式)
- react中state的作用是什么(React中useEffect 与 useLayoutEffect的区别)
- react重点和难点(关于React状态管理的三个规则总结)
- react路由组件怎么用(无废话快速上手React路由开发)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- react组件之间通信(React传递参数的几种方式)
- react和antd项目教程(React引入antd-mobile+postcss搭建移动端)
- react组件分析(react-diagram 序列化Json解读案例分析)
- reactnative ios(详解React Native与IOS端之间的交互)
- react组件的参数怎样定义的(详解React中组件之间通信的方式)
- reactmap给了key仍然提示错误(react为什么不推荐使用index作为key)
- vue react和angular(详解React Angular Vue三大前端技术)
- react表单组件怎么写(react antd实现动态增减表单)
- react组件参数(浅析React中的受控组件和非受控组件)
- 19号线二期全线电通 轨道交通项目最新进展来了(19号线二期全线电通)
- 涉及3条地铁线路 成都这4座轨道交通站点有新名字了(涉及3条地铁线路)
- 来了 成都轨道交通5条线路刷新 进度条(成都轨道交通5条线路刷新)
- 一部手机两套系统 OPPO Find X3的正确打开方式你知道吗(一部手机两套系统)
- OPPO用户看过来 汇总几个春节实用技巧,轻松搞定多设备联动玩法(汇总几个春节实用技巧)
- 北京旅游攻略(北京旅游攻略5日游及其花费)
热门推荐
- python在txt指定行添加文本(Python修改文件往指定行插入内容的实例)
- mysql索引详解及基本用法(Mysql普通索引与唯一索引的选择详析)
- docker多个端口怎么区分(解决docker run时候启动两个占有不同端口的问题)
- Windows2012配置SQLServer2014AlwaysOn的图解(Windows2012配置SQLServer2014AlwaysOn的图解)
- canvas宽高技巧(canvas画图被放大且模糊的解决方法)
- jenkins 设置gitlab(jenkins+gitlab+nginx部署前端应用实现)
- Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】(Python HTML解析器BeautifulSoup用法实例详解爬虫解析器)
- 云服务器被流量攻击了(云服务器怎么预防被攻击?)
- css伪元素是属性吗(CSS :befor :after 伪元素的巧妙用法)
- jquery中append和appendto的区别
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9