history.pushstate for changing url without page load not working

Question

I have been trying to achieve changing content on page without changing url, using history.pushState but have been getting the following error

index.html:164 Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///home/Desktop/abc/selected=box2' cannot be created in a document with origin 'null' and URL 'file:///home/Desktop/abc/index.html'. at HTMLAnchorElement. (file:///home/unfactory/Desktop/abc/index.html:164:17)

HTML Code

<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 Code

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

Seems like history.pushState is deprecated and you need to use history.push(url)

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