踩坑經歷
昨天看了篇關於react-route的文章，說BrowserRouter比HashRouter好一些，react也是推薦使用BrowserRouter，畢竟自己在前端方面來說，就是個小白，別人說什么我就照做嘛，因此我就把路由從HashRouter改成BrowserRouter
然后今天就一直在悲劇中度過來了，當路由模式采用browserHistory時，點擊每個導航都可以顯示正確的頁面，一旦瀏覽器刷新，頁面就顯示Cannot GET
然后各種百度，各種調試，一直都沒調通，甚至有那么幾個小時，想推倒重來，畢竟沒有什么是重做解決不了的，但是這樣成本太大，又得把代碼復制一遍，甚至可能到最后，還是會出現這個問題，一直到晚上10點洗澡的時候，突然想通了，是不是由於把路由從HashRouter改成BrowserRouter造成用戶訪問的資源不存在，以至於Content Security Policy的呢？洗完澡趕緊改回來，果然行了，果然洗澡的時候是最放松的，腦袋最清醒。
分析原因(百度找的)
React-Router 是建立在 history 之上的，常見的history路由方案有三種形式，分別是：
- hashHistory
- hashHistory 使用 URL 中的 hash（#）部分去創建路由，舉例來說，用戶訪問http://www.example.com/，實際會看到的是http://www.example.com/#/。
- browserHistory
- browserHistory 是使用 React-Router 的應用推薦的 history方案。它使用瀏覽器中的 History API 用於處理 URL，創建一個像example.com/list/123這樣真實的 URL
- 當刷新頁面時，瀏覽器會向服務器請求，服務器實際會去找根目錄下對應的文件，發現找不到，因為實際上我們的服務器並沒有這樣的 物理路徑/文件 或沒有配置處理這個路由，所有內容都是通過React-Router去渲染React組件，自然會報404錯誤。
- createMemoryHistory
- Memory history 不會在地址欄被操作或讀取。這就解釋了我們是如何實現服務器渲染的。同時它也非常適合測試和其他的渲染環境（像 React Native ）。和另外兩種history的一點不同是你必須創建它，這種方式便於測試。
兩種解決方法
- 使用hashHistory，不用做額外處理
- 使用browserHistory，服務器需要進行相關路由配置
方法見這里