My Backbone Routing forgets everything when I hit the browser refresh button

Question

I have an older web app that is a mix of Backbone and .Net 6. When I first start the app in Visual Studio 2022 for development, it loads fine and everything works great.

I use Backbone routing and a helper library called backbone.subroute for all my Navigation. It works fine until see below...

As I said, everything works great UNTIL I hit the browser refresh button. When I refresh the browser, I immediately get(for whatever route I'm on):

This localhost page can’t be found

No webpage was found for the web address: https://localhost:33201/gameAdmin/colorBrowser

HTTP ERROR 404

There is nothing in the browser console or network tab except a 404 error. It's as if the browser totally forgets the routing.

The back button doesn't work either until I get back to the main starting page(https://localhost:33201/studio).

Also, if I delete the route in the URL line, so that it's just the basic website with only the default route like this: https://localhost:33201/studio, it will then load correctly.

My routing is setup like this:

I first call this:

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

Then my routes:

export default Backbone.Router.extend({
    routes: {
        '': 'defaultRoute',

        'gameWorld': 'gameWorld',
        'gameWorld/*subroute': 'gameWorld',

        'playerStats': 'playerStats',
        'playerStats/*subroute': 'playerStats',

        'gameData': 'gameData',
        'gameData/*subroute': 'gameData',

    },

    initialize: function (args) {
        const { playerSetup } = args;

        this.subrouteOptions = {
            ctx: RouteContext,
            playerSetup,
        }
        this.gameView = (new GameView({ 
            playerSetup,
        })).render();
    },

    defaultRoute: function () {
        Backbone.history.navigate('/studio', { trigger: true });
    },

    gameWorld: function (subroute) {
        import('routes/GameRouter').then(GameRouter => {
            new GameRouter.default('gameWorld', this.subrouteOptions);
        });
    },

    playerStats: function (subroute) {
        import('routes/PlayerRouter').then(PlayerRouter => {
            new PlayerRouter.default('playerStats', this.subrouteOptions);
        });
    },

    gameData: function (subroute) {
        import('routes/GameDataRouter').then(GameDataRouter => {
            new GameDataRouter.default('gameData', this.subrouteOptions);
        });
    }
});

It's really hard to debug, because the browser provides no error except the 404.

Also, I put console.logs EVERYWHERE...and I can see them when I start the app and navigate around, but as soon as I hit refresh, I see none of them. So like I said, its' like the browser forgot everything.

But as soon as I go back to the default route which is /studio then everything magically starts working again.

So I'm not sure why the refresh button does this.

Does anyone have any clue what this could be?

Answer 1

If your application is not being served from the root url / of your domain, be sure to tell History where the root really is, as an option: Backbone.history.start({pushState: true, root: "/public/search/"})

Source: http://backbonejs.org/#History