How to Navigate to Another Page in JavaScript

In web applications, navigating pages is an important feature. It can be achieved using hyperlinks in HTML, while sometimes, developers need to redirect to another page dynamically using JavaScript. For instance, while submitting forms, users are redirected to the success or error message or the targeted URL/page on a button click.

This tutorial will demonstrate the methods to navigate the page to another page using JavaScript.

How to Navigate to Another Page in JavaScript?

For navigating or redirecting, use the following JavaScript approaches:

assign() method
replace() method
href attribute

Method 1: Navigate to Another Page Using “location.assign()” Method

Use the “assign()” method with the “location” object for navigating a page to another page. It redirects the browser to the provided URL in the same way as a hyperlink would.

Syntax

The following syntax is utilized for the assign() method to redirect the page to another page:

location.assign("URL")

It takes a “URL” path as an argument where the page will redirect:

Example

In an HTML file, create a button that will redirect to the official website of the Linuxhint on the button click:

<button id="submit" onclick="navigatePage()">Click Here</button>

Define a function “navigatePage()” in a JavaScript file, that will trigger on the button click. This function calls the “assign()” method by passing the URL as an argument for redirecting to the official linuxhint.com website:

function navigatePage() {
location.assign("https://linuxhint.com");
}

As you can see that we have been successfully navigated to the linuxhint.com website on the button click:

At the top left corner, you can see that after navigating to the linuxhint.com website, the back arrow button is enabled. This means that it allows you to go back or navigate to the previous page.

Method 2: Navigate to Another Page Using “location.replace()” Method

To navigate to another page, use the JavaScript built-in “location.replace()” method. It is used to replace the current document/page with a new page. This method is similar to location.assign(), but the difference is it replaces the page and not allows you to navigate back.

Syntax

Follow the provided syntax for the replace() method:

location.replace("URL")

Example

Call the replace() method with the specified URL in the defined function:

function navigatePage() {
location.replace("https://linuxhint.com");
}

The output indicates that the page has been successfully navigated but you can see that it does not allow going back to the previous page as the back button is disabled:

Method 3: Navigate to Another Page Using “location.href” Attribute

You can also use the “href” property with the “location” object for navigating to another page using JavaScript. For navigation, assign a new value of URL to it. The “href” attribute indicates the current page URL. By giving it a new value, it can be used to go to the other URL.

Syntax

The given syntax is utilized for the href attribute to navigate the page to another page:

location.href = "URL"

Example

Assign the URL to the href attribute in the defined function for redirecting to the linuxhint.com official page:

function navigatePage() {
location.href = "https://linuxhint.com";
}

Output

That’s all about navigating or redirecting to another page in JavaScript.

Conclusion

To navigate the page to another page, use the “location.assign()” method, “location.replace()” method, or the “location.href” attribute. The “assign()” method and the “href” attribute allow back navigation while the “replace()” method does not allow navigating back to the previous page. This tutorial demonstrated the methods for navigating the page to another page using JavaScript.

How to Navigate to Another Page in JavaScript