window.location.href 与 history.pushState - 使用哪个? [英] window.location.href vs history.pushState - which to use?
问题描述
我一直在自学 react-router，现在我想知道应该使用哪种方法转到另一个页面.
I've been teaching myself react-router, and now I'm wondering which method should be used for going to another page.
根据这篇文章(使用react路由器编程导航)，你可以去通过 this.props.history.push('/some/path') 到另一个页面.
According to this post (Programmatically navigate using react router), you can go to another page by this.props.history.push('/some/path').
但是，老实说，我不太确定 window.location.href 和 history.pushState 之间的区别.
Honestly, however, I'm not quite sure about the differences between window.location.href and history.pushState.
据我所知，window.location.href = "/blah/blah"; 通过进行新的 HTTP 调用引导您进入另一个页面，刷新浏览器.
As far as I understand, window.location.href = "/blah/blah"; leads you to anther page by making a new HTTP call, which refreshes the browser.
另一方面，history.pushState(和this.props.history.push('/some/path'))所做的是推送一个状态.这显然会更改 HTTP 引荐来源网址并因此更新 XMLHttpRequest.
On the other hand, what history.pushState (and this.props.history.push('/some/path')) does is to push a state. This, apprently, changes HTTP referrer and consequently updates XMLHttpRequest.
使用 history.pushState() 更改在您更改状态后创建的 XMLHttpRequest 对象的 HTTP 标头中使用的引用.
Using history.pushState() changes the referrer that gets used in the HTTP header for XMLHttpRequest objects created after you change the state.
对我来说，听起来这两种方法都进行了新的 HTTP 调用.如果有，有什么区别?
To me, it sounds like both methods make a new HTTP call. If so, what are the differences?
任何建议将不胜感激.
附注
我认为开发人员在决定如何转到另一个页面之前需要考虑是否有必要从服务器获取数据.
I thought that developers would need to consider whether it's necessary to get data from the server, before deciding how to go to another page.
如果您需要从服务器检索数据，window.location.href 会没问题，因为您将进行新的 HTTP 调用.但是，如果您正在使用 <HashRouter>，或者您想避免刷新页面以提高速度，那么有什么好方法?
If you need to retrieve data from the server, window.location.href would
be fine, since you'll make a new HTTP call. However, if you are using <HashRouter>, or you want to avoid refreshing you page for the sake of speed, what would be a good approach?
这个问题促使我发了这篇文章.
This question led me to make this post.
推荐答案
history.pushstate 不会进行新的 HTTP 调用(来自您引用的 mozilla 文档):
history.pushstate does not make a new HTTP call (from mozilla doc quoted by you):
请注意，浏览器不会在调用 pushState() 后尝试加载此 URL，但它可能会稍后尝试加载该 URL，例如在用户重新启动浏览器之后.
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.location.href = "url" navigates the browser to new location, so it does make a new http request. Note: exception is the case when you specify new url as hash fragment. Then window is just scrolled to corresponding anchor
您可以在打开网络选项卡的 devTools 控制台中检查运行它们.请务必启用保留日志"选项.网络标签列出了所有新的 http 请求.
You can check both running them from devTools console having Network tab open. Be sure to enable "preserve log" option. Network tab lists all new http requests.
这篇关于window.location.href 与 history.pushState - 使用哪个?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
