how to change url without changing browser history

Question

Until now, I only know that if I want to change URL without reloading the whole page i have to use HTML browser history API. I am using this concept in my website. Let's take example. Let suppose user is on this page ``` https://www.example.com/aboutus ``` and then he goes to product listing in which we have filters. On clicking any filters system generates new url something like this ``` https://www.example.com/products?brands[]=song&brands[]=samsung&condition[]=new ``` Internally it is just calling ``` history.pushState({}, 'Title', link.href); ``` But, it has one problem. Clicking `back` button takes to the previous filter. I dont want this functionality. I want , on clicking browser back button it should take to the page which is before `current` page. In our case, it is suppose to take to ``` https://www.example.com/aboutus ``` Thanks.

Accepted Answer

You're looking for `replaceState()`, it replaces the current position in the history instead of pushing a new one, like `pushState()` does

```
history.replaceState({}, 'Title', link.href);
```

from MDN

The History.replaceState() method modifies the current history entry, replacing it with the state object and URL passed in the method parameters. This method is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.

Remember, some functions are not available on older browsers. But there is a library that could help you out.

how to change url without changing browser history

Solution

Problem