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

时间:2017-11-30 22:43:29

标签: javascript window react-router browser-history

我一直在教自己while read -r count item; do printf -- "$item\n%0.s" $(seq 1 $count) done < input_file > output_file ,现在我想知道应该用哪种方法转到另一页。

根据this post (Programmatically navigate using react router),您可以按react-router转到另一个页面。

然而,老实说,我不太确定this.props.history.push('/some/path')window.location.href之间的差异。

据我所知,history.pushState通过新的HTTP调用引导您进入另一个页面,这会刷新浏览器。

另一方面,window.location.href = "/blah/blah";(和history.pushState)的作用是推送状态。这显然会更改HTTP引荐来源,从而更新this.props.history.push('/some/path')

以下是mozila's documentation...

的摘录
  

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

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

任何建议都将受到赞赏。

PS

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

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

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

3 个答案:

答案 0 :(得分:7)

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

  

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

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

您可以检查是否在打开“网络”选项卡的devTools控制台中运行它们。一定要启用&#34;保留日志&#34;选项。 “网络”选项卡列出了所有新的http请求。

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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

到目前为止没有问题,像魅力一样。 希望这有帮助。