反應：未捕獲的 DOMException：無法在“歷史”上執行“pushState”：歷史 state object 和 URL

Question

我有一個react項目，我現在通過webstorm打開沒問題，但是直接打開文件夾里面的index.html ，主頁面可以出來，但是點擊會報錯，點擊鏈接我用的是reactor。麻煩誰了可以幫我解決嗎，謝謝！

錯誤信息：

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///Users/qinchen/Desktop/change/dist/integralpage' 無法在原點為 'null' 的文檔中創建並且URL 'file:///Users/qinchen/Desktop/change/dist/index.html'. 在 finishTransition (file:///Users/qinchen/Desktop/change/dist/bundle.js:25897:24) 在 file:///Users/qinchen/Desktop/change/dist/bundle.js:13142:13 在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) 在 confirmTransitionTo (file:///Users/qinchen/Desktop/change/dist/bundle.js:13104: 17) 在 transitionTo (file:///Users/qinchen/Desktop/change/dist/bundle.js:13130:5) 在 Object.push (file:///Users/qinchen/Desktop/change/dist/bundle. js:13153:5) 在 Object.push (file:///Users/qinchen/Desktop/change/dist/bundle.js:13395:15) 在 Object.push (file:///Users/qinchen/Desktop/更改/dist/bundle.js:6535:15)

Answer 1

出於安全原因，加載本地文件（瀏覽器中的file：/// URL）時，不能使用pushState。 相反，您有兩個選擇：

1. 請改用哈希歷史記錄。 這將在本地文件上正常工作。
2. 啟動一個簡單的Web服務器來提供您的文件。 如果您不想構建小型服務器應用程序，請參見以下簡單列表 。 您可以選擇，它們都會在您的瀏覽器中為您提供一個支持瀏覽器歷史記錄的http：// URL。

Answer 2

安裝/使用 Web 服務和構建文件夾。 它會起作用。

處理這個問題的最簡單方法是安裝 serve 並讓它處理 rest：

npm install -g serve
serve -s build

上面顯示的最后一個命令將在端口 3000 上為您的 static 站點提供服務。與許多服務的內部設置一樣，可以使用 -l 或 --listen 標志調整端口：

serve -s build -l 4000

參考 - https://create-react-app.dev/docs/deployment/