history.pushState () вызывая навигацию браузера

Question

Я пытаюсь изменить URL-адрес страницы, не переходя в браузере на эту страницу и не вызывая обновление. В документации MDN для управления историей браузера говорится следующее:

Предположим, http://mozilla.org/foo.html выполняет следующий JavaScript:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Это приведет к отображению в строке URL http://mozilla.org/bar.html,, но не заставит браузер загрузить bar.html или даже проверить, существует ли bar.html.

Кажется, это подтверждают и все в StackOverflow. Однако в моем коде window.history.pushState() перемещается по странице. Консоль даже ясно говорит:

Navigated to http://localhost:8090/?

Вот код, который я использую:

attemptLogin(username, password)
  .then((result) => {
    // navigate to Landing Page
    window.history.pushState('data', 'title', '/');
  })

Я также не уверен, почему он добавляет знак вопроса, но тот факт, что он перемещается по браузеру, кажется более актуальной проблемой. У кого-нибудь есть идеи, которые они могут предложить?

Answer 1

Код, который вы указали, не приведет к описанному эффекту.

Вы запускаете этот код как-то . Симптомы, о которых вы говорите, связаны с таким событием, как щелчок по ссылке или отправка формы.

JavaScript работает, а затем происходит нормальное поведение отправки ссылки или формы ... что заставляет браузер перейти на новый URL.

Вам необходимо запретить поведение этого действия по умолчанию, например:

document.querySelector("a").addEventListener("click", handler);

function handler(evt) {
    evt.preventDefault();

    attemptLogin(username, password)
        .then((result) => {
                    window.history.pushState('data', 'title', '/');
        });
}