window.history.pushState change url without removing last part

Question

So I have the following url:

https://example.com/page/foo

And I'm using pushstate like this:

window.history.pushState(window.location.href, null, 'product/'+data.name+'/'+data.item);

Now, the problem is that when it changes the url, it removes "foo" so the new url will be

https://example.com/page/product/product-name/123

and I don't want this, I want to keep the original url...and append the new stuff

Answer 1

The chosen answer did not work for me, and I found a better alternative. So in order to keep the "base url" and replace everything after just use:

window.history.pushState(null, null, '/product/'+data.name+'/'+data.item);

That is, simple precede your path with a slash (/)

Answer 2

Use this instead

window.history.pushState(null, null, window.location.href + 'product/' + data.name + '/' + data.item);