JSFiddle - React, Tailwind, and code Playground

HTML

<button id="add">Add history</button>
<button id="back">Go back</button>
<div id="location"></div>
<div id="msg"></div>
<div id="stack"></div>

JavaScript

var i = 0;

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        // whatever else you want to do
        // maybe call onhashchange e.handler
        return pushState.apply(history, arguments);
    }
})(window.history);


window.onpopstate = history.onpushstate = function(e) {
    i++;
    $('#location').text(window.location.href);
    $('#msg').text('History changed ' + i  +
                   ' times (State object: ' +
                   JSON.stringify(e.state) + ')');
};


$('#add').click(function() {
    window.history.pushState({foo: 'bar'}, 
                             "page 2", 
                             "bar.html");
    
    $('#stack').text('History stack size: ' +
                     window.history.length);
});

$('#back').click(function() {
    window.history.back();   
});

$('#location').text(window.location.href);