Naviagtion Mixin not working after imperative save

Question

On my community page(A) I have a LWC component with a button which onclick will call an apex method to create a record. If the create is successfull it needs to redirect to another community page(B). Onclick calls the method handleConfirm. The issue I am facing is though the record is created/saved succesffully in the backend, the system doesn't redirect to the community page B. It remains on community page A. Through debug, I confirmed the code under the handleConfrim .then does get executed but nothing happens.
Below is the code snippet.

connectedCallback() {
    this.prod = something;
    getAsstPrgmLst({aId:this.prod})
    .then(result => {
        // does something in a for loop to populate some options.
    })
    .catch( 
        error => {
            this.error = error;
        })
    .finally(() => this.showflag = true );
}

handleConfirm(){
    createSubscription({aId: this.asstPgm.Id,
    ep:this.prgm, uId: this.userId})
    .then(result=>{
        this.isSuccess = true;
        this[NavigationMixin.Navigate]({
            type: 'comm__namedPage',
            attributes:{
                pageName:'connectpageB'
            }
        });
    })
    .catch(error =>{
        this.error = error;
    });
    
}

What I am doing wrong here? Any suggestions on how I could fix this issue.

Answer 1

Import NavigationMixin and Apply the NavigationMixin to the component's base class.