我一直在自学react-router
,现在我想知道应该使用哪种方法来转到另一个页面。
根据这篇文章(使用反应路由器以编程方式导航) https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router,您可以通过以下方式转到另一个页面this.props.history.push('/some/path')
.
但老实说,我不太确定它们之间的区别window.location.href
and history.pushState
.
据我所理解,window.location.href = "/blah/blah";
通过发起新的 HTTP 调用(刷新浏览器)将您引导至另一个页面。
另一方面,什么history.pushState
(and this.props.history.push('/some/path')
) 的作用是推动一个状态。显然,这会更改 HTTP 引荐来源网址并因此更新XMLHttpRequest
.
这是摘录自mozila 的文档... https://developer.mozilla.org/en-US/docs/Web/API/History_API
使用history.pushState() 可以更改在更改状态后创建的XMLHttpRequest 对象的HTTP 标头中使用的引荐来源网址。
对我来说,听起来这两种方法都进行了新的 HTTP 调用。如果是这样,有什么区别?
任何建议将被认真考虑。
PS
我认为开发人员在决定如何转到另一个页面之前需要考虑是否有必要从服务器获取数据。
如果您需要从服务器检索数据,window.location.href
会
没问题,因为您将进行新的 HTTP 调用。但是,如果您正在使用<HashRouter>
,或者您想为了速度而避免刷新页面,什么是一个好的方法?
这个问题促使我发表这篇文章。
history.pushstate
does not进行一个新的 HTTP 调用(来自您引用的 mozilla 文档):
请注意,浏览器在调用pushState()后不会尝试加载此URL,但它可能会在稍后尝试加载该URL,例如在用户重新启动浏览器后。
window.location.href = "url"
将浏览器导航到新位置,因此does发出一个新的 http 请求。注意:当您指定新的 url 作为哈希片段时会出现例外情况。然后窗口就滚动到相应的锚点
您可以从打开“网络”选项卡的 devTools 控制台检查两者是否正在运行。请务必启用“保留日志”选项。网络选项卡列出了所有新的 http 请求。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)