Explain page redirection in ES6?
Using the window.location Object’s href Attribute Value
The location object of the window global object contains the href attribute. The location object contains all the information about the location of the current webpage on which you are. The ‘href’ attribute of the location object contains the current URL.
To redirect the visitors to different URLs, we need to change the current URL in the web browser, which we can do by changing the value of the href attribute of the location object.
Users can follow the syntax below to redirect visitors to another page by changing the href attribute's value.
window.location = "<new_URL>"; window.location.href = "<new_URL>";
In the above syntax, if we assign a new URL value to the window.location object, by default, changes the value of the href attribute of the location object.
In the redirect() function, we are changing the value of the href attribute of the location object, which takes visitors to a new URL.
Using the location.assign() Method
The assign() is the method defined inside the location object. We can load the new document in the browser window using the location.assign() method and reloading the new document in the browser means redirection.
Follow the syntax below to use the assign() method for redirection.
In the above syntax, we have taken the location object as a reference to invoke the assign() method.
New_URL − It is a URL on which we want to redirect the users.
In this example, we have used the assign() method of the location object to load another webpage in the current browser window.
Using the location.replace() Method
The replace() method of the location object works the same as the assign() method. The only difference between the replace() and assign() methods is that the replace() method replaces the current URL with a new URL in the history stack. So, It doesn’t allow the history stack to contain the information about the previous webpage, which means users can’t go back.
The assign() method adds a new entry to the history stack. So, users can go back to the previous page using the back button of the web browser.
Users can follow the syntax below to use the replace() method for page redirection.
Redirection_URL − The redirection URL is a new URL where we want to redirect the web page visitors.
In this example, we have used the replace() method of the location object to redirect the users to the new web page. In the output, users can try to click on the back button to go back after the redirection. The replace() method doesn’t allow to go back.
Also, users can use the window object's navigate () method for redirection. The navigate() method is deprecated, so it’s not recommended for redirection.
We learned 3 to 4 methods to redirect users to the different web pages. Users can use any method according to their requirements. For example, if they want to replace the current URL, use the replace() method; Otherwise, use the assign() method. Users can use the reload() method to fetch the new server data.
- Related Articles
- What is JSP page redirection?
- Explain Constants in ES6
- Explain RegExp in ES6?
- Explain Handler Method in ES6
- Explain sub-classes and inheritance in ES6
- Redirection in PHP
- I/O Redirection in C++
- Pipes and Redirection in Linux
- Explain the benefits of spread syntax & how it is different from rest syntax in ES6?
- ES6 Trampoline Function
- ES6 Features and Syntax
- How to clone an array in ES6?
- How to Create 301 Redirection on Nginx and Apache