問題描述
第一次進入頁面，頁面點擊都是正常的，當手動在路由上輸入鏈接或者刷新，頁面就報錯顯示白屏。
解決方案
方案 1
BrowserRouter 改爲 HashRouter
方案 2
修改 webpack.config.js 配置文件
module.exports = {
...
devServer: {
historyApiFallback: true
}
}
❝注：在 devServer 中必須設置
❞historyApiFallback: true
但是引入之後historyApiFallback: true，發現二級頁面還是會報錯
繼續修改webpack.config.js 配置文件
module.exports = {
...
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/',
},
}
原因分析
🌰：您想給媽媽發送鏈接https://tictactyler.com/play，因爲您想和她一起玩。當她在瀏覽器中輸入該URL並按下Enter鍵時，會發生什麼？在這一點上，她沒有JavaScript，沒有React，也沒有React Router。瀏覽器向/play發出GET請求，由於您依靠React Router來處理所有路由邏輯（但她還沒有React Router），因此該應用程序崩潰了，並且顯示Cannot GET / play。
現在最大的問題是，我們如何解決這個問題？ 問題的根源在於，您完全依賴客戶端路由，而沒有設置任何邏輯來處理服務器端路由。解決這個問題有兩個主要思路。首先，設置客戶端和服務器端路由。第二，將所有服務器請求重定向到/index.html，這將下載所有JS資源並允許React Router從那裏獲取它。