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

Question

我一直在自学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>，或者您想避免为了速度而刷新页面，那么有什么好的方法呢？

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

Answer 1

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

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

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

---

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

Answer 2

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

Answer 3

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

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