window.location.href和history.pushState有什么区别？在IT技术中使用哪一个？

Question

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

根据这篇文章（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。

以下是摘自Mozilla文档的一段摘录...

使用 history.pushState() 会更改在改变状态后创建的 XMLHttpRequest 对象的 HTTP 标头中使用的引用者。

对我来说，两种方法都似乎会发起新的HTTP请求。如果是这样，它们之间有什么区别呢？

任何建议都将不胜感激。

PS

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

如果需要从服务器检索数据，window.location.href 可以使用，因为您会发起新的 HTTP 请求。但是，如果您正在使用 <HashRouter>，或者为了速度而避免刷新页面，则采用什么方法比较好呢？

这个问题引导我写了这篇文章。

- Hiroki

Answer 1

history.pushstate 不会发起新的HTTP请求（摘自您引用的 Mozilla 文档）：

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

window.location.href = "url" 可以将浏览器导航到新位置，所以它会发起新的http请求。 注：除非您将新URL指定为哈希片段。然后窗口只滚动到对应锚点

---

您可以通过从 devTools 控制台运行它们并打开网络选项卡来进行检查。请确保启用“保留日志”选项。网络选项卡列出所有新的 HTTP 请求。

- entio

---

谢谢您的建议。然而，我仍然不确定Mozila文档所说的“history.pushState()会更改在HTTP标头中使用的引用者”是否正确。可以假设更改HTTP标头中的引用者与发起新的HTTP调用无关吗？ - Hiroki

另一个需要注意的点是应用程序的状态。当使用history.push时，状态被维护。然而，当使用window.location.href时，状态返回到初始状态。 - Luciana Campello

如果您想发起一个新的HTTP调用（例如重定向），同时又要保持状态，该怎么办？ - V. Rubinetti

@V.Rubinetti 一个新的HTTP调用意味着一个新的页面和一个新的上下文；如果你想保持状态，就必须保持上下文或者以某种方式传递给下一个页面，例如使用查询参数。 - bfontaine

Answer 2

您可以在控制台的网络中测试此功能。使用React Router历史记录时，应用程序内不会进行刷新（没有HTTP请求）。您可以使用这种方法来实现更好的UX流程和状态持久性。据我了解，我们实际上是在修改URL（没有HTTP请求），React Router使用模式匹配根据此编程更改呈现组件。

- vapurrmaid

Answer 3

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

到目前为止，没有遇到任何问题，非常好用。 希望这可以帮到你。

- Rahul