react路由器中的hashHistory和browserHistory有啥区别？

Posted 2023-02-21

【中文标题】react路由器中的hashHistory和browserHistory有啥区别？

【英文标题】：What is the difference between hashHistory and browserHistory in react router?react路由器中的hashHistory和browserHistory有什么区别？

【发布时间】：2016-07-17 07:49:51

【问题描述】：

我已经google了很多，但我没有找到以下问题的明确答案：react-router中的hashHistory和browserHistory有什么区别？

【问题讨论】：

在此处查看 react-router 文档：github.com/reactjs/react-router/blob/master/docs/…（以及下面的哈希历史条目）

React-router documentation 有很好的关于差异的信息。文档也将跟随 API 的变化，因此最好在此处查阅这些文档而不是快速过时的解释。

自前两个 cmets 以来，文档已经移动。在这里试试：github.com/ReactTraining/react-router/blob/v3/docs/guides/…

【参考方案1】：

基本区别在于 hashHistory 使用的 URL 如下：http://myurl.com/#page/another_page/another_page

使用 BrowserHistory，您可以获得正常的网址（无哈希）：http://myurl.com/page/another_page/another_page

【讨论】：

这个 hashHistory Url 有什么好处或坏处（如果有的话）？

可以使用browserHistory来保存浏览器链接锚能力吗？我已经在我的路由器github.com/ReactTraining/react-router/issues/… 上尝试过这种方法，并且每次锚点点击都会重新呈现视图

看这篇文章。我想这就是你要找的东西：***.com/a/40280486/217187。但看起来答案是肯定的。

哈希历史也适用于旧版浏览器npmjs.com/package/react-history

太棒了，这个小答案让我很开心，很清楚也很明显，但是在React-Router第4版我们很遗憾不能使用它们。

【参考方案2】：

第一个区别：

他们使用不同的 WEB API。 <HashRouter> 使用并从 URL 读取哈希， <BrowserRouter> 使用 window.history WEB API。

第二个区别：

<HashRouter> 用于静态单页网站。非常适合基于浏览器的项目。 <BrowserRouter> 用于动态网站。应该在您拥有处理动态请求的服务器（知道如何响应任何可能的 URL）时使用。

【参考方案3】：

我认为问题不是要求格式上的差异，而是要求技术上的差异。因此在这里分享这个答案有一个技术差异：https://***.com/a/42157741/2445694

基本上浏览器不会在#之后发送url

因此，假设网站限制了成员和管理员的区域。用户导航到 /member，并被提示登录。但是服务器不会知道用户在登录页面之前是否尝试访问 /admin 或 /member，因此在登录服务器后不要知道重定向到哪里。

【参考方案4】：

1) 浏览器的历史位置数组不仅包含在我们的应用程序中访问过的位置。允许访问此列表会泄露有关用户浏览历史记录的信息，而网站不应被允许访问。

2) 浏览器历史创建位置对象，其路径名是 URL 的完整路径名。但是，您可以为历史记录指定一个基本名称，在这种情况下，完整路径名的一部分将被有效地忽略。

3) 静态文件服务器中的浏览器历史记录将在我们的服务器上有一个真实位置来获取我们的 html，而哈希历史记录使用 URL 的哈希部分来设置和读取位置。

4) 哈希历史是依赖的，因为它将所有路径信息存储在 URL 的哈希中。