这篇文章主要介绍“React报错页面空白如何解决”,在日常操作中,相信很多人在react报错页面空白如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”react报错页面空白如何解决”的疑惑有所帮助!接下来
这篇文章主要介绍“React报错页面空白如何解决”,在日常操作中,相信很多人在react报错页面空白如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”react报错页面空白如何解决”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
react报错页面空白的解决办法:1、将根路由移动到Switch标签内部的最下方;2、检查上层组件是否含有exact关键字,如果含有该关键字就去除;3、按组件的文档在最顶级子组件中进行重定向即可。
React页面空白问题
下面,我们直接上有问题的代码:
<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报错页面空白如何解决”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!
--结束END--
本文标题: react报错页面空白如何解决
本文链接: https://www.lsjlt.com/news/347818.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0