location object, a part of the window object, which allows you to perform different URL-related operations.
location.href, it returns the value of the current URL. Similarly, you can also use it to set a new URL, and users will then be redirected to that URL.
Let’s go through the following example:
console.log(location.href); // prints the current URL location.href = 'https://code.tutsplus.com'; // redirects the user to https://code.tutsplus.com
As you can see, it’s fairly easy to redirect users with the
location.href method. Since the
location object is part of the
window object, the above snippet can also be written as:
window.location.href = 'https://code.tutsplus.com';
So in this way, you can use the
location.href method to change the URL and redirect users to a different webpage.
location.assign method works very similarly to the
location.href method and allows you to redirect users to a different web page.
Let’s quickly see how it works with the following example.
As you can see, it’s pretty straightforward. You just need to pass the URL in the first argument of the
assign method, and it will redirect users to that URL. It’s important to note that the
assign method maintains the state of the
History object. We’ll discuss this in detail in the next section.
You can also use the
location.replace method allows you to replace the current URL with a different URL to perform redirection.
Let’s see how it works with the following example.
location.replace method looks very similar to the
location.assign methods of redirecting users to a different URL, there’s an important difference between them. When you use the
History object. So users won’t be able to use the back button to navigate to it.
Let’s try to understand it with the following example.
// let’s assume that a user is browsing https://code.tutsplus.com // a user is redirected to a different page with the location.href method location.href = 'https://design.tutsplus.com'; // a user is redirected to a different page with the location.replace method location.replace('https://business.tutsplus.com');
In the above example, we’ve assumed that a user is browsing the
https://code.tutsplus.com webpage. Next, we have used the
location.href method to redirect the user to the
https://design.tutsplus.com webpage. Finally, we’ve used the
location.replace method to redirect the user to the
https://business.tutsplus.com webpage. Now, if the user clicks on the back button, it would go back to
https://code.tutsplus.com instead of
https://design.tutsplus.com, since we’ve used the
location.replace method, and it has actually replaced the current URL with
https://business.tutsplus.com in the
So you should understand the difference between
location.replace and other methods before you use them. You can’t use them interchangeably since the
History object. And thus, if you want to preserve the state of the
History object, you should use other methods of redirecting users.