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

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

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

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

轉載于:https://www.cnblogs.com/cxf520/p/6606261.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。