React -- BrowserRouter、HashRouter的区别

       今天在学习React路由时遇到了有关使用HashRouter与BrowserRouter例子，查询了有关二者的区别，故想用一篇博客记录一下

底层原理

• HashRouter使用的是URL的哈希值，利用监听hashchange事件来前进后退
• BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
• BrowserRouter是基于histroy方法
• histroy 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈
• histroy 利用history.pushState结合观察者模式来前进。利用监听popstate事件+getLocation函数来回退

path表现形式

• HashRouter的路径包含#,例如：localhost:3000/#/demo/test
• BrowserRouter的路径中没有#,例如：localhost:3000/demo/test

刷新后对路由state参数的影响

• HashRouter刷新后会导致路由state参数的丢失
• BrowserRouter没有任何影响，因为state保存在history对象中。

使用优缺点

路由	优点	缺点
HashRouter	无兼容性问题	有#符号
BrowserRouter	无#符号	有兼容性问题

注意

• HashRouter可以用于解决一些路径错误相关的问题。
• hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中（#后面的请求数据不会返回给后端），对后端完全没有影响，因此改变 hash 不会重新加载页面。