JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contenuto" role="main"></div>
<ul role="navigation">
    <li><a id="p1" href="#p1">1</a></li>
    <li><a id="p2" href="#p2">2</a></li>
    <li><a id="p3" href="#p3">3</a></li>
    <li><a id="p4" href="#p4">4</a></li>
</ul>

CSS

[role=navigation] li {display:inline;}
[role=navigation] a {border:1px solid #ccc; padding:10px; background-color:#eee;}
/* la pseudoclasse :target identifica il link che ha l'id corrispondente all'hash */
[role=navigation] a:target {background-color:#fff;}

JavaScript

window.onhashchange = function(){
    //controllo se nell'hash esiste un numero di pagina
    var pagina = window.location.hash.match(/^#p(\d+)$/);
    
    //se non c'era, allora cambio l'hash in p1
    if (!pagina){
        window.location.hash = "p1";
        return;
    }
    
    //se un numero di pagina era stato trovato, allora lo estraggo...
    var numeroPagina = pagina.pop();
    
    //...e qui lo uso subito per inviare la richiesta ajax
    //omissis
    
    //poi inietto nella pagina i dati di risposta della richiesta ajax
    document.getElementById("contenuto").textContent = "Questo è il contenuto della pagina " + numeroPagina;
    
};
//invoco la funzione per eseguire il primo caricamento dei contenuti
window.onhashchange();