title: Why do I have to press back twice to go back in Backbone?
body: <h1><a href="http://jsfiddle.net/TLm28/7/show/" rel="nofollow">Live Demo of the problem</a></h1>
  
  <p>I have this little example app, where I try to implement a routing system with history. It works as excepted, but for some reason I have to press the back button twice. If you open the console, you can see the logs. When I press for example page1 and page2 and then the back link too, it logs <code>page2</code> twice. Why? If I press it again it logs <code>page1</code> twice. What? Then it finally goes back. Why do I have to press it twice? Why the logs are so crazy? How can I make it work?</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="home"&gt;Home&lt;/div&gt;
  &lt;div id="page1"&gt;Page1&lt;/div&gt;
  &lt;div id="page2"&gt;Page2&lt;/div&gt;
  &lt;div id="back"&gt;Back&lt;/div&gt;
  </code></pre>
  
  <h2>JavaScript</h2>
  
  <pre><code>var app = {};
  app.router = Backbone.Router.extend({
  
      routes: {
          '': 'home',
          'page1': 'page1',
          'page2': 'page2',
      },
  
      home: function () {
          console.log('home');
          Backbone.history.history.pushState('search');
          console.log(Backbone.history.history);
      },
  
      page1: function () {
          console.log('page1');
          Backbone.history.history.pushState('page1');
          console.log(Backbone.history.history);
      },
  
      page2: function () {
          console.log('page2');
          Backbone.history.history.pushState('page2');
          console.log(Backbone.history.history);
      },
  
  });
  
  var router = new app.router();
  Backbone.history.start();
  
  $(document).on('click', '#back', function () {
      console.log('back');
      console.log(Backbone.history.history);
      Backbone.history.history.back();
      console.log(Backbone.history.history);
      router.navigate(Backbone.history.history.state, {trigger: true, replace: true});
  });
  
  $(document).on('click', '#home', function () {
      router.navigate('home', {trigger: true, replace: true});
  });
  
  $(document).on('click', '#page1', function () {
      router.navigate('page1', {trigger: true, replace: true});
  });
  
  $(document).on('click', '#page2', function () {
      router.navigate('page2', {trigger: true, replace: true});
  });
  </code></pre>