單頁面應(yīng)用路由404

我們使用React Router 來實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)带膀，會(huì)遇到一個(gè)情況箱靴，當(dāng)直接在瀏覽器里輸入對應(yīng)路由 http://localhost:8080/novels 時(shí)淳地，會(huì)發(fā)現(xiàn)無法正確顯示頁面，報(bào)出404 錯(cuò)誤Cannot GET /novels唤冈。

究其原因峡迷，單頁面應(yīng)用程序(SPA)通常使用一個(gè)web瀏覽器可以訪問的索引文件，比如index.html，然后绘搞，在HTML5 History API的幫助下（react-router就是基于History API實(shí)現(xiàn)的）彤避，借助JavaScript處理應(yīng)用程序中的導(dǎo)航。當(dāng)用戶單擊刷新按鈕或直接通過輸入地址的方式訪問頁面時(shí)夯辖，會(huì)出現(xiàn)找不到頁面的問題琉预，因?yàn)檫@兩種方式都繞開了History API，而我們的請求又找不到后端對應(yīng)的路由蒿褂，頁面返回404錯(cuò)誤圆米。

由此而知，我們必須增加服務(wù)器相關(guān)配置來解決這個(gè)問題啄栓，開發(fā)環(huán)境我們可以在 devServer 中增加historyApiFallback: true 設(shè)置來開啟服務(wù)器支持娄帖。默認(rèn)是重新定位到根目錄的index.html，我們也可以重新定義自己規(guī)則昙楚，詳細(xì)請參考官網(wǎng)文檔 historyApiFallback 介紹

產(chǎn)品環(huán)境中參考增加中間件 connect-history-api-fallback 來完成服務(wù)器端的支持近速，具體請參考官方文檔。

peerDependency同版本依賴

開發(fā)過程中安裝第三方插件包資源時(shí)堪旧，經(jīng)常會(huì)出現(xiàn)類似警告数焊，如下圖所示：

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文件可以發(fā)現(xiàn)如下的同版本依賴

"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"
  },

復(fù)習(xí)下 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
詳細(xì)請參考The semantic versioner for npm

我們直接執(zhí)行安裝命令添加依賴

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后再編譯谭跨，世界終于清靜了。

最后編輯于：2019.07.01 16:24:39

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者