title: Click back button twice to go back in history
body: <p>I have a single page application and would like to navigate through the history using browser back and forward button. I am facing an issue when i click the back button once it does not navigate to the previous page but stays on the current page. Then when i click the browser back again it takes me to the previous page. I have tried out the following.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class PageModule {
        constructor() {
          window.addEventListener("popstate",function(){
            this.handleHistory(true);
          }.bind(this),false);
         }
  
    
  
  handleHistory(popStateEventFired = false){
      if(popStateEventFired){
        history.replaceState();
      }else{
        history.pushState(null,null);
      }
  
      history.pushState(null,null);
      
    }
          </code></pre>
  </div>
  </div>
  </p>
  <p>When i issue a search i add the search param as a query param in the url <code>?question=testsearch</code> and call the method <code>handleHistory()</code>. I have checked other answers to similar problem but they dont seem to help.
  I have to do this using vanilla javascript or knockoutjs as we maintain HTML bindings using knockoutjs but am not able to achieve this properly.
  Any help is appreciated</p>