I've tried to use jQuery's load() function to change/load content without reloading. That works, but the problem is: the URL keeps the same!

Even if i use history.pushState() to change URL, that does not solve the problem. Example:

with the famous window.history.pushState("object or string", "Title", "/new-url");

1. With that, I am creating a "fake URL" for each page - If I try to enter the website with this changed URL again, i get an error, basically the link does not exist;
2. If I refresh the page, i lost all Ajax loaded content - I need to keep the content when refresh;
3. When I click to change Ajax loaded page, keeps putting new links next to the previous one, as in the image sent;
4. I want to get this result: https://reactjs.org/ - transiting the pages, they do not reload and the link changes, it is updatable and the link works separately - how do i do it?

3) printscreen of my page and its url

Important: index.html, about.html and contact.html are existing files that will load with the jquery function below.

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`);
        })

    })