Предотвращение добавления к ссылке history.replaceState

Question

Я использую window.history.replaceState и с некоторыми проблемами в том, что он продолжает добавлять к URL.

Он был помечен как дубликат этого вопроса, что, на мой взгляд, является ошибкой, поскольку при использовании этого кода возникает та же проблема, и он продолжает добавлять индекс к URL, как описано ниже.

Пожалуйста, смотрите мой код ниже:

let index = 1;

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

Проблема, с которой я сталкиваюсь, заключается в том, что URL продолжает добавлять число, поэтому он делает что-то вроде следующего:

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

Кто-нибудь знает, как должен выглядеть код для обновления URL следующим образом:

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

Стоит также отметить, что URL-адрес является динамическим, поэтому я не могу жестко закодировать путь. Я просто хочу обновить индекс в конце URL.

Answer 1

Поскольку вы добавляете /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>

И как скрипка для Chrome.

Answer 2

Вы должны сделать это из window.location.origin и начать добавлять путь, поэтому, вероятно, ваш ответ будет

let index = 1;

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