react 單頁面應用採用browserHistory路由 部署在nginx作靜態資源服務時刷新採坑記錄

用React、React-Router、Antd、React-Redux 技術棧作了一個SPA應用，Redux存儲應用的狀態，一按F5 美好的世界瞬間坍塌，本着新技術不能影響用戶體驗的原則，一頓操做。從React-Router中 path 對應的 component入手，component須要什麼數據去後端請求什麼數據。雖然請求冗餘了點，但坍塌的世界又美好了起來。自測完成後npm run build 一下，包打出來了，丟到nginx上一試處處報錯，好多404。今後開始個人單頁面應用的採坑記錄。。。

前置環境：create-react-app 建立的工程，React-Router 用的是 browserHistory

404 靜態資源找不到問題

              

 nginx的匹配規則設置以下：

          

默認狀況下，這個構建好的靜態資源static 文件夾放到nginx 的html 文件夾下也是能夠請求到資源的，可是每次都拷貝來拷貝去太麻煩了。偷個懶吧，把這個改爲「./」

又發佈了一版，嘿嘿能夠了。頁面顯示正常

按下F5, 熟悉的 Nginx的404 頁面跳出來了。到開發環境試試沒問題啊，判定是Nginx匹配規則的問題。開始百度rewrite的匹配規則怎麼寫，nginx -s reload 重啓測試的要吐了，仍是搞不定。

最後找到關鍵詞 try_files,但好多人都是以下：

      

放到個人測試環境仍是不行。各類搗鼓： 最後寫成以下這樣，我按F5,看到了但願。

       

 頁面的靜態資源是咱們剛纔設置的「./」這種寫法，有些路由仍是報錯： Uncaught SyntaxError: Unexpected token <，可是沒出現 Nginx 404，看到一點點但願，繼續找度娘，有帖子說要不要用相對路徑用絕對路徑，看控制檯一直提示：

     

 把原來的「./」,恢復原狀，在package.json中加一個吧。把工程名做爲value值。

            

再一頓操做。竟然能夠了。全部刷新測試了一遍，能夠啦。O(∩_∩)O哈哈~

先記錄一下，總結：稍後完善

參考：http://www.javashuo.com/article/p-xekkpfig-o.html