Explain page redirection in ES6

Page redirection is a way of redirecting users and web browsers to another web address that was not requested by users. The page to which the user and web browser are redirected can be on the same web server or can be on a different web server. It could be a different website also.

The page redirection feature was first introduced in 2015 when the new es6 version of JavaScript was introduced. It uses window.location object that consists of a set of methods that can be used to redirect a page. 

Javascript Page Redirection: All the methods are listed below:

replace() method: This method is used to replace the current page URL with a new URL of the page to which the user has to be redirected.

Note: The replace method deletes the current URL from the history of the browser, and we can not navigate back to that URL by using the back key of the browser.

Syntax:

window.location.replace("");

It accepts the URL of the redirected page in the form of a string passed inside its parenthesis.

Example: This example shows the use of the replace() method.

HTML

<h2 id="GFG">
      Welcome To GFG
</h2>
<h3>Redirection using
      <strong><i>.replace()</i></strong> method.
</h3>
<button onclick="redirectME()">
      Redirect Me!
</button>
<script>
    function redirectME() {
      window.location.replace("https://practice.geeksforgeeks.org/");
    }
</script>

Output:

Explain page redirection in ES6

assign() method: The assign() method is used to assign the new location of the redirected page to the browser.

NOTE: Unlike of replace method, it doesn’t delete the current URL from the history of the browser so that we can navigate back to the previous page if needed.

Syntax:

window.location.assign("");

It also accepts a string argument to redirect to a new page.

Example: This example shows the use of the assign() method

HTML

<h2 id="GFG">Welcome To GFG</h2>
<h3>Redirection using <strong><i>.assign()</i></strong> method.</h3>
<button onclick="redirectME()">Redirect Me!</button>
<script>
    function redirectME() {
        window.location.assign("https://practice.geeksforgeeks.org/");
    }
</script>

Output:

Explain page redirection in ES6

reload() method: The reload method is used to reload the current page into a web browser.

Syntax:

window.location.reload("");

Example: This example shows the use of the reload() method

HTML

<h2 id="GFG">Welcome To GFG</h2>
<h3>
      Reload tab Using <strong><i>.reload()</i></strong> method.
</h3>

<button onclick="redirectME()">Reload Me!</button>
<script>
    function redirectME() {
        window.location.reload("https://practice.geeksforgeeks.org/");
    }
</script>

Output:

Explain page redirection in ES6

navigate() method: This method is used to assign a new value to window.location object, But it is only useful in Internet Explorer, so it could be avoided as other browsers don’t support it.

Syntax:

window.navigate("");

NOTE: Use the rel=’canonical’ inside the head tag of the HTML document to inform the search engine that you are using page redirection. It will help in enhancing the rank of the web page in Search Engine Optimization (SEO).