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 跳转后页面没刷新内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- html5创作(HTML5录音实践总结Preact)
- react初学难点(使用react的7个避坑案例小结)
- react代码质量检查(react如何实现一个密码强度检测器详解)
- react事件绑定的方式和区别(react合成事件与原生事件的相关理解)
- react新手指引页面编写(React+TypeScript进行项目构建案例讲解)
- react的动画实现(React实现动效弹窗组件)
- vue3中的setup的参数(Vue3中ref与reactive的详解与扩展)
- vue react和angular(详解React Angular Vue三大前端技术)
- react和antd管理系统(手把手教你从零开始react+antd搭建项目)
- react代码展示(教你如何从 html 实现一个 react)
- react常用设计模式(提高React界面性能的十个技巧)
- react执行流程(React开启代理的2种实用方式)
- react基础知识入门(浅谈React 的引入)
- reactnative ios(详解React Native与IOS端之间的交互)
- react高阶组件怎么用(React 高阶组件HOC用法归纳)
- react怎么使用父组件(关于antd tree和父子组件之间的传值问题react 总结)
- 元宵晚会槽点多,芒果台上来就假唱,岳云鹏不说相声改评书了(元宵晚会槽点多)
- 岳云鹏跟凤凰传奇谈心,说出了人生中最重要的三个人,这才成功(岳云鹏跟凤凰传奇谈心)
- 爱情可以当饭吃吗(爱情能当饭吃吗)
- Top 3 JSHS《运动与健康科学 英文 》跻身SCI体育学期刊世界前三(Top3JSHS运动与健康科学)
- 体坛传媒LOGO全新升级,多元发展迈出坚实步伐(体坛传媒LOGO全新升级)
- 超撩人治愈的绝美水彩,原来出自她之手 一笔一画令无数人沉醉(超撩人治愈的绝美水彩)
热门推荐
- wds怎么设置32位(wdcp /dev/vda1 磁盘占满使用100%解决办法)
- linux如何进入makefile(linux中无make命令的问题make: *** 没有指明目标并且找不到 makefile及make命令安装方)
- css文字图片垂直居中对齐(CSS设置文字图片垂直居中的方法总结)
- uniapp使用vue写页面(分析uniapp入门之nvue爬坑记)
- 学python从零基础到开发游戏(python开发游戏的前期准备)
- python随机生成时间戳(python时间序列按频率生成日期的方法)
- jupyter如何编写python(windows系统中Python多版本与jupyter notebook使用虚拟环境的过程)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- 哪些行为会让面试失败
- 云主机越来越受欢迎吗(选择香港云主机的三个理由)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9