title: Change page and change URL without refresh and keep content after refresh , like ReactJS website
body: <p>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!</p>
  <p>Even if i use history.pushState() to change URL, that does not solve the problem. Example:</p>
  <p>with the famous <code>window.history.pushState(&quot;object or string&quot;, &quot;Title&quot;, &quot;/new-url&quot;);</code></p>
  <ol>
  <li>With that, I am creating a &quot;fake URL&quot; 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;</li>
  <li>If I refresh the page, i lost <em>all</em> Ajax loaded content - I need to keep the content when refresh;</li>
  <li>When I click to change Ajax loaded page, keeps putting new links next to the previous one, as in the image sent;</li>
  <li>I want to get this result: <a href="https://reactjs.org/" rel="nofollow noreferrer">https://reactjs.org/</a> - transiting the pages, they do not reload and the link changes, it is updatable and the link works separately - <strong>how do i do it</strong>?</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/wuSs6.png" rel="nofollow noreferrer">3) printscreen of my page and its url</a></p>
  <p>Important: index.html, about.html and contact.html are existing files that will load with the jquery function below.</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;navbar&quot;&gt;
      &lt;div class=&quot;content&quot;&gt;
          &lt;div class=&quot;logo&quot;&gt;My logo&lt;/div&gt;
          &lt;ul class=&quot;pages&quot;&gt;
              &lt;li id=&quot;index&quot;&gt;Index&lt;/li&gt;
              &lt;li id=&quot;about&quot;&gt;About us&lt;/li&gt;
              &lt;li id=&quot;contact&quot;&gt;Contact&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;section id=&quot;page&quot;&gt; 
      &lt;div class=&quot;content&quot;&gt;
          &lt;!-- PAGES LOAD HERE --&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;div class=&quot;footer&quot;&gt;
      &lt;div class=&quot;content&quot;&gt;
          --Footer-- All rights reserved.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>    $(document).ready(function () {
          $('li').on(&quot;click&quot;, 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(&quot;object or string&quot;, &quot;Title&quot;, `pages/${$pageName}.html`);
          })
  
      })
  </code></pre>