current position:Home>Solution to the blank page of the project created by create react app after packaging

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

2022-04-29 16:10:50X Beichen North

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 .

copyright notice
author[X Beichen North],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291427264046.html

Random recommended