react route使用HashRouter和BrowserRouter的區別-Content Security Policy img-src 404(Not found)

踩坑經歷

昨天看了篇關於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，服務器須要進行相關路由配置
  方法見這裏