Question

77

window.location.href vs history.pushState - which to use?

rated 0 times [ 80] [ 3] / answers: 1 / hits: 44273 / 7 Years ago, thu, november 30, 2017, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

breap

Add To Favorites

Follow

Total Points: 606

Total Questions: 96

Total Answers: 108

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

breap questions

1 Chain query/mutation calls with RTK Query using React Hooks

Thu, Jun 24, 21, 00:00, 3 Years ago

1 How to go to another screen in top tab navigation in react native

Wed, Nov 11, 20, 00:00, 4 Years ago

1 React Storybook not Recognizing a Story

Wed, Mar 18, 20, 00:00, 4 Years ago

1 How to call javascript Function in Oracle APEX on button click in dynamic action?

Tue, Nov 5, 19, 00:00, 5 Years ago

1 Issue with Discord.js avatarURL

Mon, Oct 7, 19, 00:00, 5 Years ago

View All

answered 7 Years ago ramseydeshaunc · Accepted Answer

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.