如今React應(yīng)用普遍使用react-router作為路由管理，在開發(fā)端webpack自帶的express服務(wù)器下運行和測試表現(xiàn)均正常，部署到線上的nginx服務(wù)器后，還需要對該應(yīng)用在nginx的配置里作相應(yīng)調(diào)整，否則瀏覽器將不能正常使用該應(yīng)用，表現(xiàn)為頁面不顯示或頁面跳轉(zhuǎn)錯誤等異常。原因在于這些react應(yīng)用在運行時會更改瀏覽器uri而又不真的希望服務(wù)器對這些uri去作響應(yīng)，如果此時刷新瀏覽器，服務(wù)器當然是收到瀏覽器發(fā)來的uri就去尋找資源，這個uri在服務(wù)器上是沒有對應(yīng)資源，結(jié)果服務(wù)器因找不到資源就發(fā)送403錯誤標志給瀏覽器。所以，我們要做的調(diào)整是：瀏覽器在使用這個react應(yīng)用期間，無論uri更改與否，服務(wù)器都發(fā)回index.html這個頁面就行。實際操作就是在nginx配置文件里添加如下內(nèi)容：

server { ...location / {try_files $uri /index.html;} }

　　這種調(diào)整有個前提條件：該應(yīng)用在react-route里使用的history類型為browerHistory。history總共有3種類型，如圖：　　官方推薦一般使用browerHistory就好。

　　以上認識是使用react-router被陷坑后補習webpack打包原理和nginx重定向指令所得，不然，依舊是只知其然不知其所以然。webpack打包react應(yīng)用時，如果不用任何插件來分割代碼的話，結(jié)果就是一個文件而已，運行時uri的定位問題自然也是在該文件里內(nèi)部處理，不同于往常服務(wù)器上靜態(tài)資源的“真實文件”定位。try_files $uri /index.html是nginx重定向指令，意思是在站點查找有無瀏覽器發(fā)來的uri，如果沒有那就發(fā)送index.html這個文件給瀏覽器。既然我們部署到服務(wù)器的只是打包了的文件，uri定位不到，發(fā)回index.html就是了，它知道uri就在打包文件里。

轉(zhuǎn)載于:https://www.cnblogs.com/cxf520/p/6606261.html

總結(jié)

以上是生活随笔為你收集整理的nginx正确服务react-router应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。