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報錯頁面空白如何解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！