react報錯頁面空白怎麼解決

react報錯頁面空白的解決方法：1、將根路由移到Switch標籤內部的最下方；2、檢查上層元件是否含有exact關鍵字，如果含有該關鍵字就移除；3、按元件的文檔在最頂級子元件中進行重定向即可。

本教學操作環境：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
  }
]

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

• 重定向時空白

react-router-config的重定向和自訂路由的重定向有點不一樣，它是在它的最頂層子元件中進行重定向的

• 頁面渲染時空白

##此時的頁面空白其實是和上面所說的原因大致相同的，只需檢查該組件的上層組件是否含有exact關鍵字，如果含有該關鍵字就去除，如果此時還不能解決問題，就檢查路由與組件是否匹配成功(是否在該子路由上新增exact關鍵字、是否路由嵌套正確、是否全部路徑書寫正確、組件是否導出正確等等)。

• 第三種也是最簡單的一種，就是使用方法錯誤，並沒有在最頂層子元件中按元件的文件進行重定向。

至此

對於該問題應該先剖析問題的關鍵，再去定位該問題具體出現的地方，最後再去解決。

這才是解決一個問題的正確思路

推薦學習：《

react影片教學》

以上是react報錯頁面空白怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！