Navigate to LWR Community Home Page

Question

I have pretty simple Custom Modal LWC. I want it to navigate to Customer Portal Home Page onclose of the modal. Below is the code:

import LightningModal from 'lightning/modal';
import {NavigationMixin} from "lightning/navigation";

export default class DonorRegistrationModal extends NavigationMixin(LightningModal) {
    
    handleOkay() {
        this.close('okay');
        this.navigateToHomePage();
    }

    navigateToHomePage() {
        this[NavigationMixin.Navigate]({
            type: 'comm__namedPage',
            attributes: {
                name: 'Home'
            }
        })
    }
}

So, when clicking OK button I expect the modal to close and the page to be redirected to Home Page.

Actually I get exception.

Uncaught (in promise) Error: LWR4002: Could not find context to perform navigation action.

I cannot find any information regarding this exception.

Can somebody help me?

Answer 1

The possible reason for this error is that the navigation service requires a context to perform the navigation action, and the context is lost when the modal is closed.

To fix this, you may need to use a different approach to close the modal and navigate to the home page.

For example, you can try using the following steps:

• In your modal component, instead of calling the close method and the navigateToHomePage method in the handleOkay method, emit a custom event with a payload that indicates the action to be performed. For example:

.

 handleOkay() {
       const event = new CustomEvent('closemodal', {
         detail: {
           action: 'navigate'
         }
       });
       this.dispatchEvent(event);
    }

• In your parent component, handle the custom event and perform the navigation action based on the payload.
• For example:

.

handleCloseModal(event) {
   const action = event.detail.action;
   if (action === 'navigate') {
      this[NavigationMixin.Navigate]({
      type: 'comm__namedPage',
      attributes: {
          name: 'Home'
        }
      });
   }
   this.template.querySelector('c-donor-registration-modal').close();
}

This way, you can avoid the error and navigate to the home page on close of the modal.

Answer 2

The only reason is that NavigationMixin cannot be applied to LightningModal. Modal can pass parameter via close() method to the parent LWC which itself can redirect with help of NavigationMixin.