# How to update the URL without page reload  in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Sep 18, 2021. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-update-url-without-page-reload

> Learn how to use the HTML5 History API to update the browser URL without reloading the webpage in JavaScript.

HTML5 History API provides `pushState()` and `replaceState()` methods that are used to add and modify the browser history records without reloading the page, respectively.

> Note that the History API only allows updating same-origin URLs. You cannot use it to navigate to a completely different website.

## `pushState()` method

The `pushState()` method updates the URL and creates a new entry in the browser history without page reload.

Here is how it looks like:

```javascript
history.pushState(state, title, url);
```

The `state` is an object containing some data related to the new URL. It can be retrieved using JavaScript `history.state` property.

The `title` is the new page title that the browser should display. However, it is sometimes completely ignored by the browser.

Finally, the `url` is the new URL you want to add to the browser history without reloading the page.

Here is an example:

```javascript
history.pushState({
    id: 'about-me',
    source: 'web'
}, 'About me', 'https://attacomsian.com');
```

## `replaceState()` method

The `replaceState()` is another method that updates the URL without reloading the page. It works exactly the same way as `pushState()`, but replaces the existing browser history entry instead of adding a new one.

Ideally, you should use this method only when you want to change the URL without leaving any trace in browser history:

```javascript
history.replaceState({
    id: 'JavaScript Tutorials',
    source: 'web'
}, 'All JavaScript Tutorials', 'https://attacomsian.com/topics/javascript');
```