prevent history.replaceState appending to the url

I am using window.history.replaceState and having some issues in that it keeps appending to the url.

window.history.replaceState

It has been marked as a duplicate of this questionwhich I think is a mistake as when I use that code the same issue is occurring and it keeps appending the index to the url as described below.

Please see my code below:

let index = 1;

function incrementIndexAndUpdateUrl()
index++;
window.history.replaceState('Object', 'Title', `$window.location.href /$index`);



The issue I am having is that the url keeps appending the number so it is doing something like the following:

https://slackoverflowz.com/questions/ask/2/3/4

Does anyone know how the code should look to update the url like as follows:

It is also worth noting the url is dynamic so I can't hardcode the path. I just want to update the index at the end of the url.

const index

index++

window.location.href

window.location.origin

pathname

const

2 Answers
2

Since you are appending an /something, you are actually changing the pathname.
So the easy way, is to store the original one before you do change it:

/something

let index = 1;
const path = location.pathname;

btn.onclick = incrementIndexAndUpdateUrl;

function incrementIndexAndUpdateUrl()
index++;
window.history.replaceState('Object', 'Title', `$path/$index`);
console.log(location.href);


<button id="btn">increment</button>

And as a fiddle for Chrome.

You should do it from window.location.origin and start appending the pathname, so probably your answer would be

let index = 1;

function incrementIndexAndUpdateUrl()
index++;
window.history.replaceState('Object', 'Title', `$window.location.origin/question/ask/$index`);



Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy