NavigationMixin Issue – How to Fix NavigationMixin to Community TestPage not Working

community-builderexperience-cloudlightning-web-componentsnavigationmixin.navigate

TL;DR

Is there way to debug the NavigationMixin? My Button fires the navigation method and nothing happens.

Hello, I'm not sure what's going wrong here. My understanding is that this setup should be sufficient. When I console log a message, I can determine that my button is activating, but the NavigationMixin is not firing the new page. The page is just a a page with a default Rich Content element that says "Thank You" there is no additional logic on that page.

HTML

<template>
    <lightning-button label="My Button" onclick={navigateToInternalPage}></lightning-button>
 </template>

JAVASCRIPT

   import { LightningElement, api, wire, track } from 'lwc';
    import getUserData from '@salesforce/apex/CommunitiesData.getUserData'; 
    import { getFieldValue } from 'lightning/uiRecordApi';
    import ID from '@salesforce/user/Id';
    import FIRST_NAME from '@salesforce/schema/User.FirstName';
    import EMAIL from '@salesforce/schema/User.Email';
    import communityBasePath from '@salesforce/community/basePath';
    import {NavigationMixin} from "lightning/navigation";
    
    
    export default class UniversalIntakeForm extends NavigationMixin(LightningElement) {
        @track error;
        @track email; 
        @api recordId = ID;
        email = EMAIL;
        firstName = FIRST_NAME; 
        user; 
    
       
        navigateToInternalPage() {
            // Use the basePath from the Summer '20 module to construct the URL
            this[NavigationMixin.Navigate]({
                type: 'comm__namedPage',
                attributes: {
                    pageName: 'testPage__c'
                }
            });
          }

Best Answer

Refer the documentation PageReference Types

navigateToInternalPage() {
    // Use the basePath from the Summer '20 module to construct the URL
    this[NavigationMixin.Navigate]({
        type: 'comm__namedPage',
        attributes: {
            name: 'Custom_Page'
      }
    });
}

name: The unique name of the Experience Builder page. The value for name is the API Name value for a supported page. The API Name field can only be defined when a new page is being created, and must be unique. If the API Name isn’t defined upon page creation, it’s automatically generated.

Related Topic