0

0

react router 不显示怎么办

藏色散人

藏色散人

发布时间:2022-12-30 09:30:34

|

1985人浏览过

|

来源于php中文网

原创

react router不显示的解决办法:1、在父路由组件中加入browserRouter把router都包起来;2、使用“this.props.history.go()”进行组件刷新;3、在browserrouter参数里加上“forcerefresh={true}”;4、在“”里面写钩子函数,并在离开或进入此路由时调用即可。

react router 不显示怎么办

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react router 不显示怎么办?

react-router-dom 进行路由跳转组件不显示问题

场景

使用孙路由跳转父路由时,无论用Link to 还是this.props.history.push跳转,Url地址栏都变了,但是页面组件加载不出来,页面未刷新。点击父路由上的Link to ,同样跳转位置,URL不变,页面未刷新,但是组件加载了。

在跳转处以及目标路由处查看this.props发现,跳转后this.props.history已经变成跳转后路由,但是this.props.location还是匹配原来路由。而正常加载组件的页面,history和location都是同一个路由。

解决方法

博主百度了半天各种方法都试了遍,才找到真正的原因,当然还收获了很多别的有趣的方法。

真正原因

Flex3组件和框架的生命周期 中文WORD版
Flex3组件和框架的生命周期 中文WORD版

在整本书中我们所涉及许多的Flex框架源码,但为了简洁,我们不总是显示所指的代码。当你阅读这本书时,要求你打开Flex Builder,或能够访问Flex3框架的源码,跟随着我们所讨论源码是怎么工作及为什么这样做。 如果你跟着阅读源码,请注意,我们经常跳过功能或者具体的代码,以便我们可以对应当前的主题。这样能防止我们远离当前的主题,主要是讲解代码的微妙之处。这并不是说那些代码的作用不重要,而是那些代码处理特别的案例,防止潜在的错误或在生命周期的后面来处理,只是我们当前没有讨论它。有需要的朋友可以下载看看

下载

是由于react-router-dom中的BrowserRouter的滥用,博主路由是找视频听课学的,所以并不是很清楚特性,于是在父路由组件中加入browserRouter把router都包起来,再子路由中还链接有孙路由,于是再使用browserrouter将子路由包起来链接孙路由,这样孙路由实现同级跳转看不出问题,孙路由跳子路由也没问题,孙路由跳父路由就加载不出组件。而父路由跳子路由和跳孙路由也没问题。这就是这个坑的特点了。

所以我估计是这样,路由信息主要包含在browserrouter中,如果子路由中再进行包browserrouter,会导致丢失上一层browserrouter的信息。

百度收获的一些其他方法

可以使用this.props.history.go()进行组件刷新,go括号里面填的是数字,代表前一页和后一页,这个特点就是刷新,如果需要刷新可以使用。

使用跳转空白页面再跳转回来的方法,不过博主试验了下好像没啥卵用。

browserrouter参数里可以加上forcerefresh={true},博主试了一下,导致包在下面的每个路由跳转都在刷新,可能特定地方有些用。

里面还可以写个钩子函数,离开或者进入此路由时调用。比如带有权限的路由进入可以加上onEnter={myfunc} myfunc里面权限验证,不通过验证就replace this.props.history进行跳转达到目的。

推荐学习:《react视频教程

相关文章

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

6

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

59

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

80

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

38

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

10

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

13

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

17

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

155

2026.01.18

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

160

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app电商系统实战精讲课程
uni-app电商系统实战精讲课程

共66课时 | 15.4万人学习

Vue实战—打造属于自己的外卖系统
Vue实战—打造属于自己的外卖系统

共82课时 | 10.1万人学习

Vue核心技术实战教程全套完整版
Vue核心技术实战教程全套完整版

共75课时 | 9.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号