react:Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL

Question

I have a react project, I now open through webstorm no problem, but directly open the folder inside the index.html , the main page can be out, but a click will be being given, click on the link I used reactor。 Trouble who can help me solve, thank you！

Error message：

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///Users/qinchen/Desktop/change/dist/integralpage' cannot be created in a document with origin 'null' and URL 'file:///Users/qinchen/Desktop/change/dist/index.html'. at finishTransition (file:///Users/qinchen/Desktop/change/dist/bundle.js:25897:24) at file:///Users/qinchen/Desktop/change/dist/bundle.js:13142:13 at file:///Users/qinchen/Desktop/change/dist/bundle.js:13118:9 at next (file:///Users/qinchen/Desktop/change/dist/bundle.js:25765:7) at Object.loopAsync (file:///Users/qinchen/Desktop/change/dist/bundle.js:25769:3) at confirmTransitionTo (file:///Users/qinchen/Desktop/change/dist/bundle.js:13104:17) at transitionTo (file:///Users/qinchen/Desktop/change/dist/bundle.js:13130:5) at Object.push (file:///Users/qinchen/Desktop/change/dist/bundle.js:13153:5) at Object.push (file:///Users/qinchen/Desktop/change/dist/bundle.js:13395:15) at Object.push (file:///Users/qinchen/Desktop/change/dist/bundle.js:6535:15)

Answer 1

You cannot use pushState when loading up a local file (a file:/// URL in your browser), which is for security reasons. Instead, you have two options:

1. Use a Hash history instead. This will work fine on a local file.
2. Start up a simple web server to serve up your file instead. If you don't want to build a small server application, here is a list of simple ones . You can take your pick and they will all give you a http:// URL in your browser that supports the Browser history.

Answer 2

install/Use Web Serve and serve the build folder. it will work.

The easiest way to handle this would be to install serve and let it handle the rest:

npm install -g serve
serve -s build

The last command shown above will serve your static site on the port 3000. Like many of serve's internal settings, the port can be adjusted using the -l or --listen flags:

serve -s build -l 4000

Refer - https://create-react-app.dev/docs/deployment/