29

I've been teaching myself react-router, and now I'm wondering which method should be used for going to another page.

According to this post (Programmatically navigate using react router), you can go to another page by this.props.history.push('/some/path').

Honestly, however, I'm not quite sure about the differences between window.location.href and 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.

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.

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.

To me, it sounds like both methods make a new HTTP call. If so, what are the differences?

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.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.

Hiroki
  • 3,893
  • 13
  • 51
  • 90

3 Answers3

42

history.pushstate does not make a new HTTP call (from mozilla doc quoted by you):

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" 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

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.

entio
  • 3,816
  • 1
  • 24
  • 39
  • 1
    Thanks for your advice. However, I'm still not 100% sure about Mozila's doc saying "history.pushState() changes the referrer that gets used in the HTTP header ". Is it fine to assume that changing the referrer in the HTTP header isn't to do with making a new HTTP call? – Hiroki Dec 01 '17 at 01:44
  • 2
    Another point of attention is the state of the application. When `history.push`is used the **state is maintained**. However, when `window.location.href` is used, the state **returns to the initial state**. – Luciana Campello Nov 23 '20 at 14:19
  • What if you want to make a new HTTP call (like a redirect) AND maintain the state? – V. Rubinetti Aug 04 '22 at 20:08
  • @V.Rubinetti a new HTTP call means a new page and a new context; if you want to maintain the state you have to maintain the context or somehow pass it to the next page, for example by using query params. – bfontaine Jul 26 '23 at 10:17
4

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.

vapurrmaid
  • 2,287
  • 2
  • 14
  • 30
0

I use browserHistory in 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.

So far had no issues , works like charm. Hope this help.

Rahul
  • 702
  • 2
  • 8
  • 26