TIL how to change url without updating page in browser

In a Next.JS / React project, I needed to update query params in URL to match values updated in a form. But I didn't want to reload and refresh the page completely because when the form is sent, the answers are updated by an API call. 

Typically, you are suppose to use 

Router.push(url, as, {shallow: true})

But it does not worked in my case after various attempts.

After some research on the internets, I found a solution from Mozilla : history state

To add history state in the browser without reloading the page, it exists this method: 

 history.pushState(state,title,url)

In my case, I updated only the URL param 

 history.pushState({},'',newURLWithQueryParams)

Hope it can help

Enjoy!