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

此時，會造成頁面空白的因素很多，我們只說其中最具有特點的三種。