Recently, I came to a point where I need to change loaded url with server side interface. The project was on shopify so I could not add any code in .htaccess file. as generally we do in php based projects. So, the task was to change opened url on client side. The url was http:www.example.com/pages/about, the required one was like : http:www.example.com/about. I had approached this using JS hack. Here's the code if anyone has the same need.

<script>
 $( window ).on( "load", function() {
    var current_url = window.location.origin + window.location.pathname; // taken current url with 'pages' slug in variable.
   /* remove 'pages' from current url */    
    var url = location.href    
    url = url.replace("/pages","");
    history.pushState('', '', url);
    
  });

</script>


This worked for me perfectly when I used to open new pages with pages slug. Each time it removed the 'pages' from the url, but..

when I refresh the same page, I found 404.
Which is totally fair, because at that time the current url was 'http:www.example.com/about' which was not available on server side so it throw an error. For getting rid of this, follow the below code.

What would be the logic??

To remove 'pages' only if new page clicked. If user refresh the same page then we'd create a js function to reload page with the old 'pages' contained url. i.e. http:www.example.com/pages/about. Which we assigned already in current_url variable.

<script>
if(window.location.href.indexOf("pages") > -1) { // make sure to run only on 'pages' contains the url
window.onbeforeunload = function(e) { 
  e.preventDefault()    
  old_path = window.location.origin +"/pages"+window.location.pathname; // took site url & slug and assigned 'pages' string from where we removed.
  /* main hack. Check if the next clicked element is defined or not. If user clicked on any link 'document.activeElement.href' would be defined. If not, it would be undefined. So.. */
  if(document.activeElement.href==undefined){ 
    window.setTimeout(function () { 
      window.location =old_path; // set location to url which contained 'pages'
    }, 0); 
  }
window.onbeforeunload = null; // necessary to prevent infinite loop, that kills your browser 
}
}
</script>