window.location.href 与 history.pushState - 使用哪个?

window.location.href vs history.pushState - which to use?

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

根据,您可以通过this.props.history.push('/some/path')转到另一个页面。

但是,老实说,我不太清楚 window.location.hrefhistory.pushState 之间的区别。

据我所知,window.location.href = "/blah/blah"; 会通过刷新浏览器的新 HTTP 调用将您带到另一个页面。

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

这里摘自 mozila's documentation...

Using history.pushState() changes the referrer that gets used in the HTTP header for XMLHttpRequest objects created after you change the state.

对我来说,听起来这两种方法都进行了新的 HTTP 调用。如果有,有什么区别?

如有任何建议,我们将不胜感激。

PS

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

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

这个问题让我做了这个post。

history.pushstate 不会 进行新的 HTTP 调用(来自您引用的 mozilla 文档):

Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser.

window.location.href = "url" 将浏览器导航到新位置,因此它 发出新的 http 请求。 注意:当您指定新的 url 作为散列片段时会出现例外情况。然后 window 只是滚动到相应的 anchor


您可以在打开“网络”选项卡的 devTools 控制台中同时检查 运行 它们。请务必启用 "preserve log" 选项。网络选项卡列出了所有新的 http 请求。

您可以在控制台的网络中对此进行测试。将历史记录与 React 路由器一起使用时,应用程序内不会进行刷新(无 http 请求)。您可以使用它来获得更好的用户体验流程和状态持久性。据我了解,我们实质上是在修改 url(没有 http 请求),并且 React 路由器根据此编程更改使用模式匹配来呈现组件。

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

到目前为止没有任何问题,效果很好。 希望对您有所帮助。