javascript window.location.href 与 history.pushState - 使用哪个？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47583856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
window.location.href vs history.pushState - which to use?
提问by Hiroki
I've been teaching myself react-router, and now I'm wondering which method should be used for going to another page.
我一直在自学react-router，现在我想知道应该使用哪种方法转到另一个页面。
According to this post (Programmatically navigate using react router), you can go to another page by this.props.history.push('/some/path').
根据这篇文章（使用反应路由器以编程方式导航），您可以通过this.props.history.push('/some/path').
Honestly, however, I'm not quite sure about the differences between window.location.hrefand history.pushState.
但是，老实说，我不太确定window.location.href和之间的区别history.pushState。
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.
据我了解，window.location.href = "/blah/blah";通过进行新的 HTTP 调用将您带到另一个页面，刷新浏览器。
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(and this.props.history.push('/some/path')) 的作用是推送一个 state。这显然会更改 HTTP 引荐来源网址并因此更新XMLHttpRequest.
Here is an excerpt from 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.
使用 history.pushState() 更改在更改状态后创建的 XMLHttpRequest 对象的 HTTP 标头中使用的引用。
To me, it sounds like both methods make a new HTTP call. If so, what are the differences?
对我来说，听起来这两种方法都进行了新的 HTTP 调用。如果是这样，有什么区别？
Any advice will be appreciated.
任何建议将被认真考虑。
PS
聚苯乙烯
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.
我认为开发人员需要考虑是否有必要从服务器获取数据，然后再决定如何转到另一个页面。
If you need to retrieve data from the server, window.location.hrefwould
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?
如果您需要从服务器检索数据，那window.location.href就没问题了，因为您将进行新的 HTTP 调用。但是，如果您正在使用<HashRouter>，或者为了速度而不想刷新页面，那么有什么好方法？
This question led me to make this post.
这个问题促使我发表这篇文章。
回答by entio
history.pushstatedoes notmake a new HTTP call (from mozilla doc quoted by you):
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.
请注意，浏览器不会在调用 pushState() 后尝试加载此 URL，但它可能会稍后尝试加载 URL，例如在用户重新启动浏览器之后。
window.location.href = "url"navigates the browser to new location, so it doesmake 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
window.location.href = "url"将浏览器导航到新位置，因此它确实会发出新的 http 请求。注意：当您将新 url 指定为哈希片段时，情况除外。然后窗口只是滚动到相应的锚点
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.
您可以在打开 Network 选项卡的 devTools 控制台中检查运行它们。请务必启用“保留日志”选项。网络选项卡列出了所有新的 http 请求。
回答by vapurrmaid
You can test this in the Network of your console. When using history with react router, no refresh is made within the app (no http request). You'd use this for a better UX flow and persistence of state. To my understanding, we're essentially modifying the url (without the http request) and react router uses pattern matching to render components according to this programmatic change.
您可以在控制台的网络中对此进行测试。将历史记录与反应路由器一起使用时，应用程序内不会进行刷新（无 http 请求）。您可以使用它来获得更好的 UX 流程和状态持久性。据我了解，我们实际上是在修改 url（没有 http 请求），并且 react 路由器使用模式匹配根据此编程更改来呈现组件。
回答by Rahul
I use browserHistoryin react-router v3. There is no refresh and the application state is maintained throughout.
To redirect, all I do is just browserHistory.push('\componentPath'), componentPath which is mapped in the routes config of the application.
我browserHistory在 react-router v3 中使用。没有刷新，应用程序状态始终保持不变。要重定向，我所做的只是browserHistory.push('\componentPath'), componentPath 映射到应用程序的路由配置中。
So far had no issues , works like charm. Hope this help.
到目前为止没有问题，就像魅力一样。希望这有帮助。
