5 Ways to Navigate to a New URL in JavaScript

Here are five different ways you can use the global window object to navigate and redirect your users to a new URL in JavaScript:

// Redirect to a new URL
window.location.href = 'https://webtips.dev'

// Redirect to a new URL without pushing to history
window.location.replace('https://webtips.dev')

// Redirect to relative URL
window.location.href = 'webtips'

// Redirect to relative root URL
window.location.href = '/webtips'

// Redirect to a new URL in a new tab
window.open('https://webtips.dev', '_blank')

So what are the differences between them? Let's see them one by one. The simplest way to redirect your users to a new page in JavaScript is simply reassigning the new URL to window.location.href:

window.location.href = 'https://webtips.dev'

This will push a new entry into your history and navigate to the defined URL. If you prefer calling functions, you can achieve navigation with location.assign:

window.location.assign('https://webtips.dev')

This works the same way as window.location.href. So what is the difference between them?

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

The Difference Between location.href and location.assign

While there is no difference between location.href and location.assign when it comes to functionality, there are still some non-trivial (and non-functional) differences between them.

For example, when you are concerned with testing a function that relies on the location object, it will be easier to mock location.assign as it is a function. When it comes to readability, location.assign may also be easier to read, as it clearly signals you not only want to assign a variable but trying to run a function.

You can also use location.replace to redirect and navigate to a new page, without creating a new entry in the history:

window.location.replace('https://webtips.dev')

If you try to execute the above code in your console, you will notice that when you click on the back button, you will not be redirected to the same page you were coming from, but to the previous entry. (It will replace the current history entry with the new page)

If you execute the same code from a blank page, you will notice that you won't have a back button, as there is nowhere to go back, unlike when you navigate using location.href or location.assign.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

Remove ads

---

How to Redirect to a Relative URL

Using location.href, you can navigate to a relative URL. There are two different ways to navigate to a relative URL in JavaScript:

• Navigate to a relative page in the current directory
• Navigate to a relative page in the root directory

Take the following as an example:

// The current URL is "https://webtips.dev/webtips/javascript"

window.location.href = 'javascript-interview'

// The new URL will be "https://webtips.dev/webtips/javascript-interview"

When you do the above, you will be navigated to a relative URL in the current directory. This means that only the last part of the URL will be replaced. You can also do a redirect to a root URL by prefixing your path with a forward slash:

// The current URL is "https://webtips.dev/webtips/javascript"

window.location.href = '/about'

// The new URL will be "https://webtips.dev/about"

This will replace all subdirectories and redirect your users to a relative root URL under the same domain.

Lastly, you may also want to navigate to a new URL in a completely new tab. For this, however, we won't be able to use window.location. Luckily for us, we still have the following way that we can use to open pages in new tabs programmatically:

window.open('https://webtips.dev', '_blank')

window.open expects two parameters. A URL as the first parameter, and optionally a target that indicates where to open the page. By passing _blank, you can specify that it should be opened in a new tab.