history.pushstate 用于在没有页面加载的情况下更改 url 不起作用

Question

我一直在尝试使用 history.pushState 在不更改 url 的情况下更改页面内容，但出现以下错误

index.html:164 未捕获的 DOMException：无法在“历史”上执行“pushState”：无法在文档中创建 URL 为“file:///home/Desktop/abc/selected=box2”的历史状态对象来源为“null”，URL 为“file:///home/Desktop/abc/index.html”。 在 HTMLAnchorElement。 (file:///home/unfactory/Desktop/abc/index.html:164:17)

HTML 代码

<span style="float:right;"><a href="#" class="box" id='box1'>Contact Us</a></span>
<span style="float:right;"><a class='box' id='box2'>Asia-Pacific&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></span>
<span style="float:right;"><a href="#top" class="box" id='box3'>Global&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></span>    

js 代码

function selectBox(id) {
    boxes.forEach(b => {
        b.classList.toggle('selected', b.id === id);
    })
}

let boxes = Array.from(document.getElementsByClassName('box'));
console.log(boxes);
boxes.forEach(b => {
    let id = b.id;
    console.log(id);
    b.addEventListener('click', e => {
        history.pushState({ id }, `Selected:${id}`, `./selected=${id}`)
        selectBox(id);
    })
})

Answer 1

似乎history.pushState 已被弃用，您需要使用history.push(url)

https://github.com/ReactTraining/react-router/issues/4049