Question

I have a router that does the site navigation nicely and also works when clicking the browsers back / forward button. However, when entering directly an URL I get 404.

Here is my router:

define(function(require) {
var $         = require('jquery'),
    _         = require('underscore'),
    Backbone  = require('backbone');

var AppRouter = Backbone.Router.extend( {

    routes: {
        'home'       : 'homeHandler',
        'webdesign'  : 'webHandler',
        'mobile'     : 'mobileHandler',
        'javascript' : 'javascriptHandler',
        'hosting'    : 'hostingHandler',
        'contact'    : 'contactHandler'
    },

    initialize: function() {
        this._bindRoutes();
        $('.link').click(function(e){
            e.preventDefault();
            Backbone.history.navigate($(this).attr("href"),true);
        });
        if(history && history.pushState) {
            Backbone.history.start({pushState : true});
            console.log("has pushstate");
        } 
        else {
            Backbone.history.start();
            console.log("no pushstate");
        }
        console.log("Router init with routes:",this.routes);
    },

    homeHandler: function(e) {
        require(['../views/home-content-view', '../views/home-sidebar-view'],
            function(HomeContent, HomeSidebar) {
                var homeContent = new HomeContent();
                homeContent.render();
                var homeSidebar = new HomeSidebar();
                homeSidebar.render();
        });
    },

    webHandler: function(e) {
        require(['../views/web-content-view', '../views/web-sidebar-view'],
            function(WebContent, WebSidebar) {
                var webContent = new WebContent();
                webContent.render();
                var webSidebar = new WebSidebar();
                webSidebar.render();
        });
    },

    ...

});

return AppRouter;
});

Obviously, I’m missing something.

Any clarification would be greatly appreciated.

Thanks,
Stephan

Answer 1

Backbone operates on a web-page (that has already been loaded in the browser). When you enter a URL in the browser directly, you’re making a HTTP-request for that URL to the server. The server is not managed by Backbone. You have to define on the server the behavior when such HTTP-requests are encountered.