Backbone.history.start() blocks back button from leaving the page

Question

I've run into this on a few apps now, so I wonder if I'm doing something wrong with Backbone history. Here's the situation...

I have two pages, let's say:

index.html
app.html

The index page is just a normal, flat HTML page with a link to app.html. On the App page, Backbone.history.start() is called to fire up hash state management, which is used to toggle between two views on the App page, say:

app.html#search
app.html#results

So, navigating back and forth between the #search and #results pages works great. No problems there. The issue occurs when you try to use the back button to step all the way back to index.html. The path back to the index page involves a stop at app.html (no hash state), at which the Backbone router dutifully fills in missing hash state, putting you back at app.html#search. Again, clicking the back button will go to app.html, which fills in the missing hash state again... basically, you're now stuck in a loop and can't go back from the page. This same behavior occurs when using push state.

This seems like a potentially common problem with apps that automatically fire up their own routing system on top of a default page URL. Does anyone know of a good way to avoid this?

Answer 1

The problem is that app.html isn't doing anything on it's own; and so, may somehow break the app if navigated.

In this case, what you could do is instead of redirecting the root route to another, just use it as the default page:

routes: {
  "": "search",
  "results": "results"
}