React-Router V4中如何理解BrowserRouter和HashRouter的区别?

#1

两者区别:

  • 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

求指点!

#2

通过样例终于理解了官方中所说的hashRouter不支持location.key location.state是什么意思了!原来是在路由传参的过程中,如果都通过state方式传递参数,BowserRouter刷新路由页面之后还能从历史记录中获取到state值,而HashRouter是会丢失之前的state数据的。详情查看React-router V4 中BrowserRouter和HashRouter的区别

React-router带参数跳转后手动刷新,参数丢失
#3

你搞错了 ,在react里面是没有query这个参数的,只能说是自定义。

#5

在查看资料的时候有发现都普遍使用query, 它也是属于自定义一类参数。感谢指正~