react报错网页留白的解决方法是什么?

发布时间：2023-07-05 12:00:16 所属栏目：教程来源：网络

导读： 　　这篇文章主要介绍“react报错页面空白如何解决”，在日常操作中，相信很多人在react报错页面空白如何解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希

　　这篇文章主要介绍“react报错页面空白如何解决”，在日常操作中，相信很多人在react报错页面空白如何解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”react报错页面空白如何解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

　　react报错页面空白的解决办法：1、将根路由移动到Switch标签内部的最下方；2、检查上层组件是否含有exact关键字，如果含有该关键字就去除；3、按组件的文档在最顶级子组件中进行重定向即可。

　　下面，我们直接上有问题的代码：

　　<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关键字、是否路由嵌套正确、是否全部路径书写正确、组件是否导出正确等等)。

　　第三种也是最简单的一种，就是使用方法错误，并没有按组件的文档在最顶级子组件中进行重定向。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!