react項目使用路由調整nginx 404

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

server {  
  ...
  location / {
    root html/build
    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://blog.csdn.net/qq_26222859/article/details/54287068