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，服务器须要进行相关路由配置
  方法见这里