Solution to the blank page of the project created by create react app after packaging

Problem description ：

When we use create-react-app Scaffolding creates a react After the project , When the development of the project is completed, you will find that you want to package it , adopt npm run build When the project packaged by the command is accessed on the browser side, the page will be blank .

resolvent ：

There are generally two solutions to such problems , The first and most common , When we open the browser console, we will find , When the home page is blank, the browser console will report a lot of 404 Resource request error , This situation is easy to solve , We only need to find the in the root directory of the project package.json Add a line of configuration to the , as follows ：

"homepage": "./",

After adding this line of configuration, repackage and deploy , There is a good chance that it will solve the problem of page blank . However, there are many cases where there will still be blank pages , But at this time, we will find that the browser console does not report errors , Just the front page blank . At this time, we need to check the routing component in the code to see if there is any problem , If you are using components that are BrowserRouter, Then there will be problems when the project we packaged and deployed is parsed on the browser side , That is, there will be blank pages , At this time, we need to switch the routing component to HashRouter, as follows ：

import { HashRouter as Router, Route } from 'react-router-dom';

Through the above optimization , We will find that the problem of page blank has been solved .