How to suspend and resume Router without firing any events in ExtJS7?

Question

I am trying to silently change the current url hash without the Router firing any events (like onStateChange) and then resume the Router. I tried this:

Ext.route.Router.suspend(false);
this.redirectTo('...');
Ext.route.Router.resume(true);

But the onStateChange is still being fired after resume(). I also tried:

Ext.route.Router.suspend(false);
Ext.util.History.un('change', Ext.route.Router.onStateChange, Ext.route.Router);
Ext.util.History.suspendEvents(false);

this.redirectTo('...');

Ext.util.History.resumeEvents(true);
Ext.util.History.on('change', Ext.route.Router.onStateChange, Ext.route.Router);
Ext.route.Router.resume(true);

with the same result. It seems the problem is that the events are being fired outside of the current event loop, so when you suspend the events they are still firing in the current loop.

I ended up using this hack which seem to do the trick, but maybe there is a cleaner solution:

Ext.route.Router.suspend(false);
this.redirectTo('...');
Ext.Function.defer(function(){
    Ext.route.Router.resume(true);
}, 1, this);

Answer 1

Extending on your idea for your solution, I think all you would need to add is a clearLastTokens call. Here's a test Fiddle, and the override that I would apply.

Ext.define('RouteOverride', {
    override: 'Ext.route.Mixin',

    redirectToSilent: function (hash, opt) {
        const Router = Ext.route.Router;
        const currentRoute = Ext.util.History.getToken();
        Router.suspend(false);
        this.redirectTo(hash, opt);
        Ext.asap(function () {
            Router.clearLastTokens(currentRoute);
            Router.resume(true);
        });
    }
});