window.location.href vs history.pushState - 使用哪个？

Posted 2023-02-21

【中文标题】window.location.href vs history.pushState - 使用哪个？

【英文标题】：window.location.href vs history.pushState - which to use?

【发布时间】：2018-05-14 23:54:33

【问题描述】：

我一直在自学react-router，现在我想知道应该使用哪种方法转到另一个页面。

根据this post (Programmatically navigate using react router)，您可以通过this.props.history.push('/some/path')转到另一个页面。

不过，老实说，我不太确定 window.location.href 和 history.pushState 之间的区别。

据我了解，window.location.href = "/blah/blah"; 通过新的 HTTP 调用将您引导至另一个页面，该调用会刷新浏览器。

另一方面，history.pushState（和this.props.history.push('/some/path')）所做的是推送一个状态。显然，这会更改 HTTP 引荐来源网址并因此更新 XMLHttpRequest。

这是mozila's documentation...的摘录

使用 history.pushState() 可以更改在您更改状态后创建的 XMLHttpRequest 对象的 HTTP 标头中使用的引荐来源网址。

在我看来，这两种方法都进行了新的 HTTP 调用。如果有，有什么区别？

我们将不胜感激。

附言

我认为开发人员在决定如何转到另一个页面之前，需要考虑是否有必要从服务器获取数据。

如果您需要从服务器检索数据，window.location.href 将 没关系，因为您将进行新的 HTTP 调用。但是，如果您使用的是<HashRouter>，或者您想避免为了速度而刷新页面，那么有什么好的方法呢？

这个问题让我发了这篇文章。

【参考方案1】：

history.pushstate 不进行新的 HTTP 调用（来自您引用的 mozilla 文档）：

请注意，在调用 pushState() 之后，浏览器不会尝试加载此 URL，但它可能会在稍后尝试加载 URL，例如在用户重新启动浏览器之后。

window.location.href = "url" 将浏览器导航到新位置，因此它确实发出新的 http 请求。 注意：将新 url 指定为哈希片段时会出现例外情况。然后窗口只是滚动到相应的锚点

---

您可以从打开“网络”选项卡的 devTools 控制台检查是否运行它们。请务必启用“保留日志”选项。网络选项卡列出了所有新的 http 请求。

【讨论】：

感谢您的建议。但是，我仍然不能 100% 确定 Mozila 的文档说“history.pushState() 更改了在 HTTP 标头中使用的引荐来源网址”。是否可以假设更改 HTTP 标头中的引用者与进行新的 HTTP 调用无关？

另一个注意点是应用程序的状态。当history.push被使用时，状态被维持。但是，当使用window.location.href 时，状态返回到初始状态。

【参考方案2】：

您可以在控制台的网络中对此进行测试。将历史记录与反应路由器一起使用时，应用程序内不会进行刷新（无 http 请求）。您可以将其用于更好的 UX 流程和状态持久性。据我了解，我们本质上是在修改 url（没有 http 请求），并且 react 路由器使用模式匹配来根据这个编程更改呈现组件。

【参考方案3】：

我在 react-router v3 中使用browserHistory。没有刷新，应用程序状态始终保持不变。 要重定向，我所做的只是browserHistory.push('\componentPath')，在应用程序的路由配置中映射的组件路径。

到目前为止没有任何问题，就像魅力一样。 希望对您有所帮助。