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

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?

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