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

踩坑经历

昨天看了篇关于react-route的文章,说BrowserRouter比HashRouter好一些,react也是推荐使用BrowserRouter,毕竟自己在前端方面来说,就是个小白,别人说什么我就照做嘛,因此我就把路由从HashRouter改成BrowserRouter
然后今天就一直在悲剧中度过来了,当路由模式采用browserHistory时,点击每个导航都可以显示正确的页面,一旦浏览器刷新,页面就显示Cannot GET
react route使用HashRouter和BrowserRouter的区别-Content Security Policy img-src 404(Not found) 然后各种百度,各种调试,一直都没调通,甚至有那么几个小时,想推倒重来,毕竟没有什么是重做解决不了的,但是这样成本太大,又得把代码复制一遍,甚至可能到最后,还是会出现这个问题,一直到晚上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,服务器需要进行相关路由配置
    方法见这里
上一篇:Java 8 forEach简单例子


下一篇:中国电信中兴F460光猫破解及路由级联设置