Explain page redirection in ES6?

Javascript Web Development Front End Technology

This tutorial will cover page redirection, introduced in the ES6 version of JavaScript. Page redirection is a way to send web page visitors to another URL from the current URL. We can redirect users to either the different web pages of the same website or another website or server.

In JavaScript, a window is a global object which contains the location object. We can use the different methods of the location objects for the page redirection in ES6, which is all we learn below.

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.

Syntax

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.

Example

In the example below, we have created the button with the text “redirect to another webpage”. We are invoking the redirect() function of JavaScript when the user clicks on the button.

In the redirect() function, we are changing the value of the href attribute of the location object, which takes visitors to a new URL.

<html>
<body>
   <h2>Using window.location.href attribute for page redirection</h2>
   <p>Click below button to redirect </p>
   <button id="redirect" onclick="redirect()">
   Redirect to the another webpage
   </button>
   <script type="text/javascript">
      function redirect(){
         window.location.href="https://tutorialspoint.com/"
      }
   </script>
</body>
</html>

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.

Syntax

Follow the syntax below to use the assign() method for redirection.

window.location.assign("<new_URL>");

In the above syntax, we have taken the location object as a reference to invoke the assign() method.

Parameters

New_URL − It is a URL on which we want to redirect the users.

Example

In this example, we have used the assign() method of the location object to load another webpage in the current browser window.

<html>
<body>
   <p>Using the <i>window.location.assign()</i> method to redirect users to another webpage.</p>
   <button id="redirect" onclick="redirect()">Redirect </button>
   <script type="text/javascript">
      function redirect(){
         window.location.assign("https://www.tutorialspoint.com ");
      }
   </script>
</body>
</html>

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.

Syntax

Users can follow the syntax below to use the replace() method for page redirection.

Window.location.replace("<redirection_URL>")

Parameters

Redirection_URL − The redirection URL is a new URL where we want to redirect the web page visitors.

Example

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.

<html>
<body>
   <p>Using the <i>window.location.replace()</i> method to redirect users to another webpage.</p>
   <button id="redirect" onclick="redirect()">Redirect </button>
   <script type="text/javascript">
      function redirect(){
         window.location.replace("https://www.tutorialspoint.com");
      }
   </script>
</body>
</html>

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.