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

Question

我一直在教自己react-router,现在我想知道应该用哪种方法去另一页.

根据这篇文章(使用react路由器以编程方式导航),您可以转到另一个页面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.

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

对我来说,听起来两种方法都会进行新的HTTP调用.如果是这样,有什么区别？

任何建议将被认真考虑.

PS

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

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

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

Answer 1

history.pushstate 没有进行新的HTTP调用(来自您引用的mozilla doc):

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

window.location.href = "url"将浏览器导航到新位置,因此它会发出新的http请求.注意:将新url指定为哈希片段时会出现异常.然后窗口滚动到相应的锚点

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

另一个值得注意的点是应用程序的状态。当使用 `history.push` 时，**状态被维持**。然而，当使用“window.location.href”时，状态**返回到初始状态**。 (2认同)