Skip to content
Related Articles

Related Articles

Explain page redirection in ES6

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 27 Mar, 2022

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 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 a set of methods that can be used to redirect a page. 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:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page redirection in es6</title>
</head>
<body>
    <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>
</body>
  
</html>

Output:

Before redirecting the page:

After redirecting the page:

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:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page redirection in es6</title>
</head>
<body>
    <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>
</body>
</html>

Output:

Before redirecting the page:

After redirecting the page:

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

Syntax:

window.location.reload("");

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page redirection in es6</title>
</head>
<body>
    <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>
</body>
</html>

Output:

Before reloading the page:

After reloading the page:

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). 

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!