What is the reason for react white screen?

The reason for the white screen in react is that when the HtmlWebpackPlugin plug-in introduces bundle.js, it introduces a relative path. The solution is: 1. Add publicPath to the output configuration; 2. In history mode, set historyApiFallback It can be true.

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

What is the reason for the white screen in react?

White screen problem in react history mode

Recently, when I use react again, because I don’t want to use ugly hash, I switch the routing mode to history, which resulted in some problems, such as refreshing the white screen and failing to load images. Here we will talk about the solutions.

Cause

First of all, let’s talk about the reasons for this series of phenomena.

There is no problem when we refresh the page under the path http://localhost:xxxx/. Everything seems so normal. But when we change to a submodule, the refresh screen will be white. Why?

We see that it will look for bundle.js from the current path. Why? Because when the HtmlWebpackPlugin plug-in helps us introduce bundle.js, it introduces the relative path

. Therefore, when refreshing, it is searched relative to the current url.

Solution

Once the reason is clear, the solution is ready. We just need to find a way to make the loading path of bundle.js start from the root directory when refreshing, instead of following the current url.

1.Output configuration is added to publicPath

output: {
    filename: 'assets/js/bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/"
}

What does publicPath mean? There is such a sentence on the official website

webpack-dev-server will also use publicPath as the base by default, and use it to decide in which directory to enable the service to access the files output by webpack.

Simple understanding, your static resources will be loaded from this path

publicPath: "/" //Loading path '/assets/js/bundle.js'

In this way, every refresh will start loading from the root directory, so our bundle.js will not be lost. The same problem occurs when images cannot be loaded.

2.historyApiFallback of webpack-dev-server

In history mode, devServer needs to configure historyApiFallback to true

devServer: {
historyApiFallback: true
}

Pay attention to the above two points, and history mode can be used normally . If there are other reasons, please feel free to add them.

ps: After the project is deployed on the server, the page screen goes blank. Relevant settings need to be made in the background, which will not be discussed here.

Recommended learning: "react video tutorial"

The above is the detailed content of What is the reason for react white screen?. For more information, please follow other related articles on the PHP Chinese website!