JSFiddle - React, Tailwind, and code Playground
HTML
<button id="location">With location.hash</button>
<button id="history">With history.pushState</button>
<div id="status">Status</div>
CSS
#status.fail {
background-color: red;
}
#status.pass {
background-color: green;
}
JavaScript
$ = function(id) { return document.getElementById(id); };
var changed = false;
$('location').addEventListener( 'click', function() {
location.hash = "#myhash";
test();
}, true );
$('history').addEventListener( 'click', function() {
history.pushState(null, null, '#myhash');
test();
}, true );
window.addEventListener( 'hashchange', function() {
if( location.hash === "#myhash" ) {
changed = true;
}
}, true);
function test() {
window.setTimeout(function() {
$( 'status' ).setAttribute( 'class', changed ? 'pass' : 'fail' );
changed = false;
}, 500 );
}