JSFiddle - React, Tailwind, and code Playground

by ghostoy

HTML

<a href="/page/1" data-page="1">Page 1</a>
<a href="/page/2" data-page="2">Page 2</a>
<a href="/page/3" data-page="3">Page 3</a>
<a href="#page/1">Page 1</a>
<a href="#page/2">Page 2</a>
<a href="#page/3">Page 3</a>
<pre id="output"></pre>

JavaScript

window.addEventListener('popstate', function(e) {
    $('#output').append("[popstate] location: " + document.location + ", state: " + JSON.stringify(e.state) + '\n');
}, false);

window.addEventListener('hashchange', function(e) {
    console.log(e);
    $('#output').append("[hashchange] location: " + document.location + ", state: " + JSON.stringify(e.state) + '\n');
});

$('a[data-page]').on('click', function(e){
    var $a = $(this);
    history.pushState({page: $a.data('page')}, $a.text(), $a.attr('href'));
    e.preventDefault();
});