react route使用HashRouter和BrowserR

踩坑经历

昨天看了篇关于react-route的文章，说BrowserRouter比HashRouter好一些，react也是推荐使用BrowserRouter，毕竟自己在前端方面来说，就是个小白，别人说什么我就照做嘛，因此我就把路由从HashRouter改成BrowserRouter
然后今天就一直在悲剧中度过来了，当路由模式采用browserHistory时，点击每个导航都可以显示正确的页面，一旦浏览器刷新，页面就显示Cannot GET

0e68291cb4ba49f83f7082283ed43c2.png

然后各种百度，各种调试，一直都没调通，甚至有那么几个小时，想推倒重来，毕竟没有什么是重做解决不了的，但是这样成本太大，又得把代码复制一遍，甚至可能到最后，还是会出现这个问题，一直到晚上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，服务器需要进行相关路由配置
  方法见这里