react报错页面空白怎么解决-前端问答-PHP中文网

首页

web前端

前端问答

react报错页面空白怎么解决

藏色散人

Jan 03, 2023 pm 02:07 PM

react

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

react报错页面空白怎么解决

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

react报错页面空白怎么解决？

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
  }
]

此时，会引起页面空白的因素有很多，我们只说其中最具有特点的三种。