While developing web applications, developers frequently need to redirect users to different pages within the site. Relative URLs are resource paths that are relative to the URL of the current page. They are commonly used to refer to pages, images, or other materials included within the same website or directory structure. In contrast to absolute URLs, which include the entire protocol and domain, relative URLs enable flexibility by using the current page’s URL as a starting point.

This article will demonstrate the ways for redirecting pages to relative URLs in JavaScript.

How to Redirect a Page to a Relative URL in JavaScript?

To redirect the page to a relative URL, use the following attributes or methods with the JavaScript predefined “window.location” object:

• window.location.href Attribute
• window.location.replace() Method

Method 1: Redirect the Page to the Relative URL Using “location.href” Attribute

For redirecting the page to the relative URL, use the “window.location.href” attribute in JavaScript. It is a property of the “window.location” object that represents the complete URL of the current page. It will redirect the browser to the specified relative URL. To indicate that a given URL is relative to the root of the current website, start it with a forward slash (/).

Syntax

You can use any of the following syntaxes for redirecting the page to a relative URL using the “href” attribute:

window.location.href = "/path";

Or:

window.location.href = "/page.html";

If the desired page is in another directory, use the given syntax:

window.location.href = "subdir/page.html";

Example
First, we will create a main page that contains a heading, and a button that will redirect the user to another page on the button’s click:

<div style="text-align: center;"> 
<h1>JavaScript Redirect to Relative URL</h1> 
<input type="button" value="Go to new URL" onclick="newURL()"> 
</div>

In the <script> tag, we will define a function “newURL” that will trigger on the button’s click to redirect the page to another page by providing a relative URL to the “href” attribute of the “window.location” object:

function newURL(){ 
window.location.href = "/new.html"; 
}

The “new.html” contains two headings using the <h4> and <h1> tags respectively:

<div style="text-align: center;"> 
<h4>This the second page of </h4> 
<h1>JavaScript Redirect to Relative URL</h1> 
</div>

In the output, when redirecting to a relative URL, the browser will resolve the URL relative to the current page’s URL:

If you are looking to redirect to a different domain or an absolute URL, use an absolute URL rather than a relative URL:

function newURL(){ 
window.location.href = "https://www.google.com/"; 
}

Output

Method 2: Redirect the Page to the Relative URL Using “location.replace()” Method

You can also redirect the page to the relative URL using the “replace()” method with the “window.location” object. This will replace the current URL with the specified URL, effectively redirecting the page.

Syntax

The following syntax is utilized for the replace() method to redirect the page to the relative URL:

window.location.replace("path");

Example
In the defined function, we will call the “replace()” method with the “window.location” object by passing the relative URL:

function newURL(){ 
window.location.replace("/new.html"); 
}

As you can see the output replaces the current URL with the specified “/new.html” URL:

You can also redirect the page by replacing the existing URL with an absolute URL:

function newURL(){ 
window.location.replace("https://www.google.com/"); 
}

Output

That’s all about the redirecting page to a relative URL in JavaScript.

Conclusion

To redirect a page to a relative URL, use the “window.location.href” attribute or the “window.location.replace()” method. While specifying a relative URL, use the forward slash (/) that will indicate that a given URL is relative to the root of the current website.

You may easily redirect the page to another URL in JavaScript by using the “window.location.href” attribute. Because, in the replace() method there is no option to go back to the previous URL as it is replaced with the new URL. This article demonstrated the ways for redirecting a page to a relative URL in JavaScript.