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 跳转后页面没刷新内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- reactnative示例代码(React Native项目框架搭建的一些心得体会)
- react native web白屏(关于React Native 无法链接模拟器的问题)
- react源码教程(详解React 代码共享最佳实践方式)
- react组件之间通信(React传递参数的几种方式)
- react新手指引页面编写(React+TypeScript进行项目构建案例讲解)
- react组件参数(浅析React中的受控组件和非受控组件)
- react性能优化是哪个周期(React 并发功能体验前端的并发模式)
- react 使用实例(React+高德地图实时获取经纬度,定位地址)
- vue react和angular(详解React Angular Vue三大前端技术)
- react 查看word文件(React实现导入导出Excel文件)
- react判断数据格式(详解Ref在React中的交叉用法)
- react usestate实现原理(浅谈react useEffect闭包的坑)
- react表单组件怎么写(react antd实现动态增减表单)
- reactnative混合开发教程(教你使用vscode 搭建react-native开发环境)
- react怎么使用父组件(关于antd tree和父子组件之间的传值问题react 总结)
- react 组件如何发布(React如何创建组件)
- 读卖乐园的彩灯(读卖乐园的彩灯)
- 新疆80后在淘宝卖干果 以前是 不务正业 如今帮乡亲致富(新疆80后在淘宝卖干果)
- 弄清楚了销 售 买 卖这四个字,母婴生意做起来就没那么难了(弄清楚了销售买)
- 数读 买首饰金是 投资黄金 吗 买金容易卖金难(数读买首饰金是)
- 销 售 买 卖 你真的了解这四个字了吗(销售买)
- 谢娜是得罪快乐大本营造型师了吗 全场被黑化(谢娜是得罪快乐大本营造型师了吗)
热门推荐
- 安装C# Windows服务需要“设置服务登录”
- 如何在新公司建立良好形象
- css怎么设计文字阴影(css实现动态阴影、蚀刻文本、渐变文本效果)
- python进行回归分析(Python多项式回归的实现方法)
- html和js代码结合(JS、CSS和HTML实现注册页面)
- vue函数中的默认参数(Vue3中SetUp函数的参数props、context详解)
- django详情页面获取用户id(Django项目中添加ldap登陆认证功能的实现)
- 移动web跨端开发领域(Web移动端布局那些事)
- docker容器状态显示(Docker consul的容器服务更新与发现的问题小结)
- phpstudy显示403(phpStudy配置多站点多域名方法及遇到的403错误解决方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9