HashRouter & BrowserRouter

1,522 阅读2分钟

已知:使用HashRouter在浏览器加载页面时#后面的字符串是不会发送到后台的,不论hash怎么变后台接收到的都是#之前的请求,服务器只需要返回同样的HTML,然后由浏览器端解析 # 后的部分,完成浏览器端渲染;而对于BrowserRouter,url中是不存在#,后台接收到的是完整的url请求,所以有知友就亲切的称呼HashRouter是前端路由(局部更新),BrowserRouter是服务端路由(网页跳转);

HashRouter的Hash不是散列的意思,是#符号的英文叫hash,由于请求与#之后的hash无关,因此请求的资源路径永远为/,相当于index.html;但是有人说这样的url丑,这一点我是非常认同的,我有强烈的强迫症。当我们通过state传递参数的时候,因为hashRouter没有使用html5中history的api,无法从历史记录中获取到key和state值,如果使用了state,当刷新路由后state值会丢失导致页面显示异常。

BrowserRouter使用的是HTML5的新特性History,低版本浏览器可能不支持,但是实际产品中_使用BrowserRouter用户体验会更好。_ 

BrowserRouter用户体验好在什么地方?或者为什么推荐使用****BrowserRouter。

  1. History API 提供了 pushState() 和 replaceState() 方法来增加或替换历史记录

  2. hash 部分并不会被浏览器发送到服务端,服务端不能获取请求细节

  3. 有些应用会忽略 URL 中的 hash 部分,eg. 分享拼夕夕url时如果hash部分被忽略...

HTML5 History:

  1. 历史状态管理是现代web应用开发一个难点,用户每次操作不一定会打开一个全新的页面,比如熟知的局部更新数据,这种情况前进后退按钮就失去了作用,导致用户很难在不同状态之间切换
  2. H5通过更新History对象为管理历史状态提供了方便,能够在不加载新页面的情况下改变url。
  3. 通过History对象操作,新的状态信息被加入历史状态栈或替换掉某个状态信息,但是浏览器不会向服务器发送请求,这样前进&后退按钮也能使用了;得到新的状态信息后必须把页面重置为状态对象中的数据表示的状态(这一步需要自行实现,浏览器不会去自动实现)
  4. IE不支持
  5. 刷新页面时,Browser会带着当前的url去服务器请求,然后返回一个HTML;此处需要通过中间代理去处理一下
  6. 因为1的原故,首选使用hashchange事件(H5新增)