What is the use of HTML5 pushState in Backbone History Start method

Question

I have a simple Backbone app. I am trying to understand the difference created by passing pusState: true when starting Backbone.History object.

JavaScript

var r = new (Backbone.Router.extend({
  routes: {
    "users": "allUsers",
    "users/new": "createUser"
  },

  allUsers: function () {
    v.render("showing all users");
  },
  createUser: function () {
    v.render("showing form for creating new user");
  }
}));

Backbone.history.start({ pushState: true });

Q1. When I pass pushState: true and I open localhost:3000/#/users/ , this url automatically redirects to localhost:3000/users Why does this redirect happen ?

Q2. When I do not pass pushState: true then redirect does not happen. localhost:3000/#/users/ works fine but localhost:3000/users does not work ?

What is importance of passing this value in history.start method and why is it important.

Answer 1

Including the pushState option when starting Backbone.history tells Backbone to use the HTML5 history API. Basically, this API lets you change the URL in the address bar without reloading the page ( see more about it here ). Without pushState , Backbone will use hashes ( # ) to change the URL, so it doesn't have to reload the page.

When I pass pushState: true and I open localhost:3000/#/users/, this url automatically redirects to localhost:3000/users Why does this redirect happen ?

Since you've enabled the history API, Backbone will choose to use actual routes ( localhost:3000/users ) instead of hashed routes ( localhost:3000/#/users/ ). However, it still understands the hashed routes, so it redirects them to the actual route. This way, if you enabled pushState in an existing application, any user who has a hashed route bookmarked will still be able to use that bookmark. (And of course, any new bookmarks will have the right route).

When I do not pass pushState: true then redirect does not happen. localhost:3000/#/users/ works fine but localhost:3000/users does not work ?

Answer to Q2: When pushState is not enabled, Backbone will only use hashed routes. So localhost:3000/#/users/ doesn't redirect because it is the "right" route: it will display the content. Depending on how you've set up your server, localhost:3000/users will either

1. Load your app but show no content (or default content)
2. Load whatever the /users resource is, OR
3. Give you a 404 error.

Answer 2

When using pushState, you're telling your Backbone application to fetch the HTML from the backend at the defined URL (without hash). This means that your backend needs to be prepared for that, which is why the localhost:3000/users doesn't work by default if you didn't foresee a backend resource. Fetching the HTML from the backend happens without page refresh though, so it doesn't interrupt the JS from running.
When using the hash without pushState, you're using the front end router (hashed routes) and its callbacks only, and no request to the backend is made.