[SalesForce] NavigationMixin.Navigate not navigating to home on community – LWC

I am building a lightning community using LWC, where on successful login trying to navigate to standard home page of the community, but i see no URL redirection is happening.Below is the logic i have written.

    import { LightningElement } from 'lwc';
    import authenticateLogin from "@salesforce/apex/Login_Controller.authenticateLogin";
    import { NavigationMixin } from 'lightning/navigation';

export default class LoginPage extends NavigationMixin(LightningElement){

        handleLogin(event) {
            var userName= this.template.querySelector(".userName");
            var password = this.template.querySelector(".password");

            authenticateLogin({ userName: userName.value , password : password.value})
                    .then(result => {
                        console.log("Auth success ! ");
                        this[NavigationMixin.Navigate]({
                            type: 'comm__namedPage',
                            attributes: {
                                pageName: 'home'
                            }
                            });
                            console.log("Navigation success ! ");
                    })
                    .catch(error => {
                        this.error = error;
                        console.log("error "+error);

                    })
                    .finally(() => {
                        console.log("finally ");

                    });

        }
    }

On console.log i see both "Auth success !" and "Navigation success !" are coming but the redirection is not happening, am i doing anything wrong in this.

This is the help doc i am following to achieve this – https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_page_reference_type

Best Answer

I had the exact same issue and fixed it adding the navigation menu bar on my login page.

In my case, I had to make a custom theme Layout. For that I created an aura component in which I added a custom navigation bar (another aura component that I had to create because I needed to override the "Home" button functionality) adding the following div:

<div class="navigation">
    <!-- you add this line here if you want to use the standard nav bar --> 
    {!v.navBar}
    <!-- you add this line if you have a custom nav bar -->
    <c:navMenu></c:navMenu>
</div>

(Use this documentation as reference: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_builder_theme_layout.htm)

The result .cmp file of the custom layout component will be something like this:

<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
    <aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
    <aura:attribute name="newHeader" type="Aura.Component[]" required="false"/>
    <div style="outline: none; max-width: 1440px; margin-left: auto; margin-right: auto;">
        <div class="profileMenuRegion">
            {!v.profileMenu}
        </div>
        <div class="newHeader">
            {!v.newHeader}
        </div>
        <div class="navigation">
            <!-- here goes the reference to the custom nav bar component -->
            <c:navMenu></c:navMenu>
        </div>        
        <div class="mainContentArea" style="outline: none; max-width: 1140px; margin-left: auto; margin-right: auto;">
            {!v.body}
        </div>
    </div>
</aura:component>

I don't know if while using a standard theme you need to explicitly add to the page the navigation bar.

Using refreshApex()

Since you are using a wired function, you can invoke refreshApex() to refresh the component's data when the component is loaded (i.e. in connectedCallback()), rather than pulling data from the cache.

Using the code that you provided, the module with the wired function would become:

// IMPORTANT - remember to import the function
import { refreshApex } from '@salesforce/apex';

...

@track flag = {};

// Introduce property to track the wired result to refresh later
wiredFlag;

@wire (getFlag)
wiredGetFlag(result){
    this.wiredFlag = result;

    // Destructure result into two variables: data and error
    const { data, error } = result;

    if (data) {
        this.flag = data.flag;
    } else if (error) {

    }
}

connectedCallback() {
    // Refresh the data on load
    if (this.wiredFlag && this.wiredFlag.data) {
        refreshApex(this.wiredFlag);
    }
}

Note: you cannot refresh data that has been fetched imperatively using refreshApex() since it was never cached, as per documentation https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.apex

If you do not need to handle the wired function error in JS, you can simplify the module:

import { refreshApex } from '@salesforce/apex';

...

@wire (getflag) flag;

connectedCallback() {
    if (this.flag && this.flag.data) {
        refreshApex(this.flag);
    }
}

HTML

<template>
    <template if:true={flag.data}>{flag.data.flag}</template>
    <template if:true={flag.error}>{flag.error}</template>
</template>

LWC NavigationMixin.Navigate – Issue with Getting ID After Creating New Record

when createCertificate() is invokes, it invoked async method createRecord(recordInput) - but before it returns the result from server, the lines after that will be executed in synchronous way. You need fire navigation after the result is returned in then as below: (and remove navigation from top)

createRecord(recordInput)
  .then(cert => {
      .......
      this[NavigationMixin.Navigate]({
        type: "standard__recordPage",
        attributes: {
            recordId: this. cert.Id,
            actionName: "edit"
        }
        });
}

Option 2:

You can use async-await function.

async firstMethod() {
    ...
    const cert = await this.createCertificate();
    
    this[NavigationMixin.Navigate]({
      type: "standard__recordPage",
      attributes: {
        recordId: this.cert.Id,
        actionName: "edit"
      }
    });
}

and return new Promise in createCertificate() as shown in async-await function

Best Answer

Related Solutions

[SalesForce] LWC: NavigationMixin.Navigate not able to refresh/reload the whole page

Using refreshApex()

LWC NavigationMixin.Navigate – Issue with Getting ID After Creating New Record

Option 2:

Related Topic