JavaScript: Go to URL: A Complete Guide

The window.location value represents the current URL you are viewing in your browser. You can replace this value to go to another URL In JavaScript. This is useful if you want to redirect a user to another page. You can also use the assign() or replace() methods.

There are a couple of reasons you may want to redirect a user to a different website or an updated path name. In most cases, you may want to redirect depending on a user’s authorization – whether a client is logged in to a site. In this article, we take a look at how to do that in a web page using JavaScript.

JavaScript Go to URL

The JavaScript browser history API lets you go to a new URL. You can use the following methods to navigate to a new URL:

• Assigning a new value to window.location.
• Using the window.assign() method.
• Using the window.replace() method.

All of these three methods accomplish the goal of navigating to another URL equally. Let’s take a look at each of these methods.

JavaScript window.location Value

To navigate to a new URL, use the location object from the Browser’s History API. The session history lets you reassign the location object to a new URL or use the href property on that same object.

The syntax for this approach is:

window.location = "url";

“url” represents the URL you want the user to visit. When this line of code runs, a JavaScript redirect starts. This changes the page which the user views in their web browser.

Let’s take a look at this method in the form of an example:

const handleClick = (e) => {
      console.log("click")
      window.location = ('https://careerkarma.com') 
      // window.location.href = ('https://careerkarma.com')
      console.log(window.location)
    }

When the handleClick() function runs, our code will log a statement to the JavaScript console. Then, our code will redirect us to a new URL.

JavaScript window.location.assign()

The location object has a redirect method called assign(). This method assigns the current URL with the assigned URL and add it to the history stack.

The history stack represents the pages you have viewed (think about the “back arrow” that lets you go back a page).

Consider the following syntax:

window.location.assign("url");

Unlike the last example, we do not need to assign any value to a JavaScript variable (window.location). Instead, we use a method to change the web page the user views.

The history stack is how the browser remembers where a back button or a forward button should go to.

Let’s take a look at a full example of this method:

const handleClick = (e) => {
      console.log("click")
      window.location.assign('https://careerkarma.com');      
}

If you want to redirect to a different page on the same site, use the path name property on the location object:

const handleClick = (e) => {
      console.log("click")
      window.location.pathname = ('/newpage.html')
      console.log(window.location)
}

JavaScript window.location.replace()

You have the ability to control whether the user can use the back button to go back to the previous site.

Using the replace() method, you can navigate a user to a site and stop them from going back to the previous page. The assign() method, on the other hand, saves the page you were previously viewing in your browser history. So, with assign() you can view the last page you were on.

Let’s take a look at the replace() method:

window.location.replace("url");

Like assign(), replace() is a method. This method accepts one argument:A the URL to which you want to point the user.

We can use the replace() method with a custom function to change the URL the user views when the method is run:

const handleClick = (e) => {
      console.log("click")
      window.location.replace('https://careerkarma.com'); 
}

Use this Repl.it to play with the different methods to redirect to a URL of your choice. You can use the Run button to reset the code to the default.

Conclusion

There are three ways to go to a URL in JavaScript: using window.location, the window.location.assign() method, or the window.location.replace() method.

Do you want to learn more about JavaScript? Check out our How to Learn JavaScript guide. This guide contains top tips on how to learn JavaScript and a list of comprehensive learning resources for beginners and intermediate developers.