Main Router appends a # at the end of route "" cause in dom referencing anchors not work in Backbone/Require app

Question

In a Backbone.Router main router, I have "" route for my beginning route on app load. Its method decides to whether to create and render login view first or home view. When localhost:8080/indexapp is visited with no route it triggers the first route below, the empty "" route. After login and arriving homeview, url in address bar looks like localhost:8080/indexapp#. Form this point ordinary anchor hrefs referencing some dom elements currently available in the document does not lead to them. If I delete the hash at the end of the url and refresh the page, anchors work as intended.

What is the reason for that? What is the way to solve this issue?

mainrouter:

define([
    'jquery',
    'ratchet',
    'underscore',
    'backbone',

    'forms/formsdatamodel',
    'login/loginview',
    'register/registerview',

    'home/homeview',
    ],
    function($, Ratchet, _, Backbone, formsDataModelInst, LoginView, RegisterView, HomeView){
        var MainRouter = Backbone.Router.extend({
            routes: {
                "": "render_home",              
                "login": "render_login",
                "register": "render_register",
            },
            initialize: function(){
                this.listenTo( formsDataModelInst, 'sync', this.render_home );
            },

            render_home: function(){
                if( formsDataModelInst.get('loginp') == true ){ //show you app view for logged in users!
                    this.homeView = new HomeView();
                    this.homeView.render();
                }
                else if ( formsDataModelInst.get('loginp') == false ){ //not logged in!
                    Backbone.history.navigate("/login", {trigger:true});
                }
            },
            render_login: function(){ //display your login view
                this.loginView = new LoginView;
                this.loginView.render();
            },
            render_register: function(){ //display your register view
                this.registerView = new RegisterView;               
                this.registerView.render();
            },
        });

        return MainRouter;
});

Answer 1

My idea is to avoid empty url after # in address bar to overcome not working anchors. I do not know to make address bar url without # in hitting empty route. I have modified the main router to avoid empty url after # by:

associating "" route to a method, gate, that navigates to a route, "/home", that is associated with the method render_home_or_login that decides to render which.

routes now after modification:

routes: {
                "": "gate",
                "home": "render_home_or_login",
                "login": "render_login",
                "register": "render_register",
}

gate method added:

gate: function() {
                Backbone.history.navigate("/home", {trigger:true});
            },

This way the route will show like localhost:8080/indexapp#home at its bares case. Avoiding emty url in address bar has solved the problem.