Intenté usar la función load() de jQuery para cambiar/cargar contenido sin recargar. Eso funciona, pero el problema es: ¡la URL sigue siendo la misma!

Incluso si uso history.pushState() para cambiar la URL, eso no resuelve el problema. Ejemplo:

con el famoso window.history.pushState("object or string", "Title", "/new-url");

1. Con eso, estoy creando una "URL falsa" para cada página. Si intento ingresar al sitio web con esta URL modificada nuevamente, obtengo un error, básicamente el enlace no existe;
2. Si actualizo la página, perdí todo el contenido cargado de Ajax; necesito mantener el contenido cuando actualice;
3. Cuando hago clic para cambiar la página cargada de Ajax, sigue poniendo nuevos enlaces al lado del anterior, como en la imagen enviada;
4. Quiero obtener este resultado: https://reactjs.org/ - transitando las páginas, no se recargan y el enlace cambia, es actualizable y el enlace funciona por separado - ¿cómo lo hago ?

3) printscreen de mi página y su url

Importante: index.html, about.html y contact.html son archivos existentes que se cargarán con la función jquery a continuación.

HTML:

 <div class="navbar"> <div class="content"> <div class="logo">My logo</div> <ul class="pages"> <li id="index">Index</li> <li id="about">About us</li> <li id="contact">Contact</li> </ul> </div> </div> <section id="page"> <div class="content"> <!-- PAGES LOAD HERE --> </div> </section> <div class="footer"> <div class="content"> --Footer-- All rights reserved. </div> </div>

JS:

 $(document).ready(function () { $('li').on("click", function () { $pageName = $(this).attr('id'); $('#page .content').load(`pages/${$pageName}.html`); $('li').removeClass('active'); //only to remove the selection of actual page in CSS $(this).addClass('active'); //only to add the selection of actual page in CSS window.history.pushState("object or string", "Title", `pages/${$pageName}.html`); }) })