React页面空白问题
前言
有时,当我们使用react-router模块在路由切换时会出现页面空白的情况,这次就将该情况讲解清楚并解决。
出现的问题
下面,我们直接上有问题的代码:
<Switch><Route path={"/"} component={loadable(() => import("./App.jsx"))} /><Route path={"/home"} component={loadable(() => import("./views/Home/Home.jsx"))} /><Route path={"/login"} component={loadable(() => import("./views/Login/Login.jsx"))} />
</Switch>
这个代码是我们经常会用到的其中之一,其实解决这种代码的页面空白问题很简单,就是直接在Route标签内给她添加exact字段,通过强制匹配规则使路由跟页面组件匹配到一起,但是使用exact时会出现二级页面匹配不上。
因为react-router的匹配规则在Switch标签中是从上往下匹配,当路由需要跳转至home路由时,它是首先匹配到当前路由的根路径,根路径 可以匹配任何该路由下的二级路由,但是因为根路径没有绑定页面,所以会是空白。
解决方式
这种问题很容易就能解决,
<Switch><Route path={"/home"} component={loadable(() => import("./views/Home/Home"))} /><Route path={"/login"} component={loadable(() => import("./views/Login/Login"))} /><Route exact path={"/"} component={loadable(() => import("./App.jsx"))} />
</Switch>
看上面一段代码,将根路由路由移动到Switch标签内部的最下方就可解决。
因为Switch标签的匹配规则,此时会变成当其他二级路由匹配不到时,才会去匹配根路径,并且根路径上加上了exact强制匹配字段,使根路径可以强制匹配。如此路由还有二级路由,exact字段去掉即可。
使用react-router-config
当使用类似react-router-config等react路由管理模块包时,非常容易出现白屏现象,这是因为对于react路由的不熟悉和对于第三方模块包的不熟悉导致的。
const routes = [{path: "/",component: Home,routes: [{path: "/",render: () => <Redirect to="/user" />},{path: "/user",component: User,exact: true},{path: "/content",component: Content,exact: true}]},{path: "/login",component: Login,exact: true}
]
此时,会引起页面空白的因素有很多,我们只说其中最具有特点的三种。
- 重定向时空白
react-router-config的重定向和自定义路由的重定向有点不一样,它是在它的最顶层子组件中进行重定向的 - 页面渲染时空白
此时的页面空白其实是和上面所说的原因大致相同的,只需检查该组件的上层组件是否含有exact关键字,如果含有该关键字就去除,如果此时还不能解决问题,就检查路由与组件是否匹配成功(是否在该子路由上添加exact关键字、是否路由嵌套正确、是否全部路径书写正确、组件是否导出正确等等)。 - 第三种也是最简单的一种,就是使用方法错误,并没有按组件的文档在最顶级子组件中进行重定向。
至此
对于该问题应该先剖析问题的关键,再去定位该问题具体出现的地方,最后再去解决。
这才是解决一个问题的正确思路
React页面空白问题相关推荐
- react部署之页面空白
react部署之页面空白 问题:create-react-app build打包后,页面出现空白. 可能一: 控制台报错,js等文件找不到(404) 文件路径问题,只需修改package.json文件 ...
- 配置LNMP遇到的问题(页面空白,不能解析php等)以及fastcgi和php-fom的关系
文章目录 一.前言 二.开始配置LNMP 1.下载php,nginx,mysql等 2.配置nginx 3.启动ngin和php之后,去根目录新建文件 4.页面空白,F12查看请求,在response ...
- Vite+Vue3页面空白、图标不显示问题解决
页面空白问题 由于项目部署在子文件夹下,因此需要配置vite.config.js const config = {base: './', } el-icon图标不显示.打包时mkdir无权限 在控制台 ...
- vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往 ...
- php搭建的网站空白,使用phpstudy搭建dedecms网站后台页面空白解决方法
这篇文章主要为大家详细介绍了使用phpstudy搭建dedecms网站后台页面空白解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 在把 phpStudy ...
- vue项目dist编译文件部署到服务器:页面空白、F5刷新报错404、403报错、等等bug - 总结篇
文章目录 问题一. vue编译打包dist文件之后部署到线上服务器 ,访问页面却是空白? 问题二.如果不是空白,页面F5之后就又变成空白? 以Nginx服务器为例,(如下图FTP所示) `404报错: ...
- react页面保留_如何在React中保留已登录的用户
react页面保留 If you run a quick Google search for persisting a logged-in user in React (or keeping a us ...
- dz手机版空白显示index.php,关于Discuz x3.3页面空白解决方法
今天找时间分析了一下,找到了页面空白的原因,可能是因为php版本兼容性的问题所致,所以只是部分用户遇到这种情况,这里分享一下. 经过分析发现是sourcefunctionfunction_core.p ...
- 【vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud】
vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud问答
最新文章
- python合并csv文件_PYTHON合并CSV文件的实践
- 直播 | CMU博士后刘鹏飞:文本生成任务十大发展趋势(2020-2021)
- bar图设置距离 python_python画图设置坐标轴的位置及角度及设置colorbar
- JS的for循环小例子
- 【LeetCode】3月25日打卡-Day10
- python网络安全工具箱界面_Python开发案例:设计启动工具箱,显示图形界面的方式...
- 高级I/O-----dup/dup2
- 椭圆函数与模函数(2012.10出版)(2013-01-16 09:34:57)
- 【STM32】【HAL库】【实用制作】数控收音机(软件设计)
- 微信小程序扫码功能的使用
- 单耳蓝牙耳机怎么连接_蓝牙耳机怎么切换单耳
- 正交编码 正交编码器 增量式编码器
- 计划排程系统用户画象分析
- 从家乐福中国到中国家乐福
- 关于 ELEMENTOR 的常见问题
- 如何使用Windows Live Writer远程发布到WordPress
- 浅谈SVG的两个黑魔法
- 读取用户输入的账户名称,将账户名写入到数组保存
- 计算机技术基础 vb 试卷及答案,云南师范大学《VB》期末试卷及答案
- OAuth2.0微信code获取失败怎么办
热门文章
- 环信im Flutter sdk使用帮助
- HarmonyOS系统中内核实现NFC无线通信的方法
- Unix/Linux编程:解析路径名------realpath()
- SVM详解(一)线性可分支持向量机与硬间隔最大化
- Hive的Parquet存储与LZO压缩
- python数据分析(三)——pandas缺失值处理
- C语言输入一串包含单词和‘_’的字符串,将所有的单词存入二维数组中,并打印输出
- 软件接口测试工具篇(一)
- 十二星座的心是什么做的
- struct timeval用法与时间溢出问题