React：react-router的hash模式和history模式

react-router有hash模式和history模式。

• url中：hash带有#，history没有。

• HashRouter原理：

window.onhashchange监听，{ Provider, Consumer } = React.createContext()来传递,window.location对象中的属性，hash，state。
该模式下：window.location.hash，页面只会加载对应的组件。

• BrowserRouter原理：

window.history API，只有点击前进回退按钮，或者api触发history.go()，history.goBack()，history.forward()可以触发window.onpopstate事件;该模式下使用window.location.pathname/window.location.href()修改路径（或者原路径），页面都会重新加载渲染。
该模式下：浏览器中触发前进、后退按钮页面不会重新加载，只会加载对应的组件。

这两种模式下使用history.go()页面都会重新加载,或者地址栏回车也会重新加载。

• hash

即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.aaa.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

• history

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）。
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，React-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

• history模式的问题

通过history api，我们丢掉了#，但是它也有个问题：不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话），因为刷新是实实在在地去请求服务器的。

在hash模式下，前端路由修改的是#中的信息，而浏览器请求时不会将 # 后面的数据发送到后台，所以没有问题。但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，则会刷新出来404页面。

参考文件：https://www.cnblogs.com/HappyYawen/p/14251578.html