两者区别:
- BrowserRouter使用HTML5 history API,保证UI界面和URL保存同步
采用这种方式需要后端或者Nginx配置通配路由,比如在某个路径下重定向到模板首页 否则路由刷新页面时会404
- HashRouter使用URL(即window.location.hash)的哈希部分来保持UI与URL同步的。哈希历史记录不支持location.key和location.state 用来支持旧版浏览器,官方不建议使用
这基本是所有接受React-Router4.0文章中都会讲到的。一直没有能理解到官方文档中所说的这一句:“重要说明:哈希历史记录不支持location.key或location.state。在以前的版本中,我们试图填充行为,但是有一些我们无法解决的边缘情况。任何需要此行为的代码或插件都不起作用。”是什么意思?或者和Browser-Router对比后有什么不一样的地方。或者什么样的行为能解释哈希历史记录不支持location.key或location.state。
我写了一个例子,分别使用BrowserRouter和HashRouter,发现传递参数他们都是支持query和state的,但是唯一BrowserRouter的时候,通过this.propts.loaction能获取到一个key属性,HashRouter没有,可是这个key属性是干啥用的呢?
(1)BrowserRouter
(2)hashRouter
求指点!