How to solve react error page blank

Solution to the blank react error page: 1. Move the root route to the bottom of the Switch label; 2. Check whether the upper component contains the exact keyword, and remove it if it contains the keyword; 3. Press The component's documentation can be redirected in the top-level subcomponent.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to solve the blank error page in react?

React page blank problem

Preface

Sometimes, when we use the react-router module to switch routes Sometimes the page will be blank. This time we will explain the situation clearly and solve it.

Problems that arise

Below, we will go directly to the problematic code:

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

This code is one of the ones we often use. In fact, the solution to this kind of code The page blank problem is very simple, just add the exact field directly to the Route tag, and use forced matching rules to match the route with the page components. However, when using exact, the secondary page will not match.

Because the matching rules of react-router are matched from top to bottom in the Switch label, when the route needs to jump to the home route, it first matches the root path of the current route. The root path can match any The secondary route under this route, but because the root path does not have a bound page, it will be blank.

Solution

This problem can be easily solved.

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

Look at the above code and move the root route to the inside of the Switch label can be solved at the bottom.

Because of the matching rules of the Switch label, the root path will be matched only when other secondary routes cannot be matched, and the exact mandatory matching field is added to the root path to make the root path A match can be forced. This route also has secondary routes, and the exact field can be removed.

Using react-router-config

When using react routing management module packages such as react-router-config, it is very easy to have a white screen phenomenon. This is because It is caused by unfamiliarity with react routing and unfamiliarity with third-party module packages.

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

At this time, there are many factors that will cause the page to be blank. We will only talk about the three most distinctive ones.

• Blank when redirecting

The redirection of react-router-config is a little different from the redirection of custom routing. The

• page that is redirected in its top-level subcomponent is blank when rendering

The page blank at this time is actually the same as mentioned above The reason is roughly the same. You only need to check whether the upper component of the component contains the exact keyword. If it contains the keyword, remove it. If the problem cannot be solved at this time, check whether the route and the component are successfully matched (whether it is in the sub-route). Add the exact keyword, whether the routing is nested correctly, whether all paths are written correctly, whether the components are exported correctly, etc.).

• The third and simplest method is to use the wrong method and not redirect in the top-level sub-component according to the component's document.

At this point

For this problem, we should first analyze the key to the problem, then locate the specific place where the problem occurs, and finally solve it.

This is the correct way to solve a problem

Recommended study: "react video tutorial"

The above is the detailed content of How to solve react error page blank. For more information, please follow other related articles on the PHP Chinese website!