記錄一下實現過程中遇到的一些坑。
單頁面應用路由404
我們使用React Router 來實現路由跳轉時，會遇到一個情況，當直接在瀏覽器里輸入對應路由 http://localhost:8080/novels 時，會發現無法正確顯示頁面，報出404 錯誤Cannot GET /novels。
究其原因，單頁面應用程序(SPA)通常使用一個web瀏覽器可以訪問的索引文件，比如index.html，然后，在HTML5 History API的幫助下（react-router就是基于History API實現的），借助JavaScript處理應用程序中的導航。當用戶單擊刷新按鈕或直接通過輸入地址的方式訪問頁面時，會出現找不到頁面的問題，因為這兩種方式都繞開了History API，而我們的請求又找不到后端對應的路由，頁面返回404錯誤。
由此而知，我們必須增加服務器相關配置來解決這個問題，開發環境我們可以在 devServer 中增加historyApiFallback: true 設置來開啟服務器支持。默認是重新定位到根目錄的index.html，我們也可以重新定義自己規則，詳細請參考官網文檔 historyApiFallback 介紹
產品環境中參考增加中間件 connect-history-api-fallback 來完成服務器端的支持，具體請參考官方文檔。
peerDependency同版本依賴
開發過程中安裝第三方插件包資源時，經常會出現類似警告，如下圖所示：
warning " > connected-react-router@6.4.0" has unmet peer dependency "history@^4.7.2".
warning " > connected-react-router@6.4.0" has incorrect peer dependency "react-redux@^6.0.0".
warning " > connected-react-router@6.4.0" has unmet peer dependency "react-router@^4.3.1 || ^5.0.0".
我們查看connected-react-router的package.json文件可以發現如下的同版本依賴
"peerDependencies": {
"history": "^4.7.2",
"react": "^16.4.0",
"react-redux": "^6.0.0",
"react-router": "^4.3.1 || ^5.0.0",
"redux": "^3.6.0 || ^4.0.0"
},
復習下 Caret Ranges(^)：
- ^1.2.3 := >=1.2.3 <2.0.0
- ^0.2.3 := >=0.2.3 <0.3.0
- ^0.0.3 := >=0.0.3 <0.0.4
- ^1.2.3-beta.2 := >=1.2.3-beta.2 <2.0.0
- ^0.0.3-beta := >=0.0.3-beta <0.0.4
詳細請參考The semantic versioner for npm
我們直接執行安裝命令添加依賴
yarn add history react-router
可以解決 unmet 的警告
"dependencies": {
"axios": "^0.19.0",
"connected-react-router": "^6.4.0",
"history": "^4.9.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"redux": "^4.0.1",
"redux-actions": "^2.6.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
}
可以看到"history": "^4.9.0"和"react-router": "^5.0.1"是滿足peerDependency同版本依賴。
而"react-redux": "^7.1.0" 則與connected-react-router中的同版本依賴"react-redux": "^6.0.0"不符，所以要解決此問題，需要安裝低于7的react-redux版本才行。
我們刪除react-redux后安裝yarn add react-redux@6.0.1后再編譯，世界終于清靜了。
