Navigation in lightning web component

 In this blog post we will learn "Navigation in lightning web component".

To generate a URL or to navigate to a page reference we use the lightning-navigation service wire adapters and functions.

CurrentPageReference :

CurrentPageReference is used to get a reference to the current page in Salesforce. As page URL formats can change in future releases, so in order to future proof our apps we use page references instead of URLs.

Syntax :

import { CurrentPageReference } from 'lightning/navigation';

@wire(CurrentPageReference)

pageRef;

NavigationMixin :

NavigationMixin adds two APIs to our component's class.

1) [NavigationMixin.Navigate](pageReference, [replace]) - A component calls this API to navigate to another page in the application.

2) [NavigationMixin.GenerateUrl](pageReference) - A component calls this API to get a promise that resolves to the resulting URL. 

The component can use the URL in the href attribute of an anchor. It can also use the URL to open a new window using the window.open(url) browser API.

Syntax :

import { NavigationMixin } from 'lightning/navigation';

export default class MyCustomElement extends NavigationMixin(

    LightningElement

) {}

navigationSampleLWC.html

<template>

    <lightning-card title="Navigate To Contact Record ">

     <lightning-button label="New Contact" onclick={navigateToNewContact}></lightning-button>

     <lightning-button label="View Contact" onclick={navigateToViewContact}></lightning-button>

     <lightning-button label="Edit Contact" onclick={navigateToEditContact}></lightning-button>

    </lightning-card>

</template>

navigationSampleLWC.js

import { LightningElement,api } from 'lwc';

import {NavigationMixin} from 'lightning/navigation';

export default class NavigationSampleLWC extends NavigationMixin(LightningElement) {

@api recordId;

// Navigate to the Contact new page

navigateToNewContact(){

    this[NavigationMixin.Navigate]({

        type: 'standard__objectPage',

        attributes: {

            objectApiName: 'Contact',

            actionName: 'new'

        },

    });

}

// Navigate to the Contact view page

navigateToViewContact(){

    this[NavigationMixin.Navigate]({

        type: 'standard__recordPage',

        attributes: {

            recordId : this.recordId,

            objectApiName: 'Contact',

            actionName: 'view'

        },

    });

}

// Navigate to the Contact edit page

navigateToEditContact(){

    this[NavigationMixin.Navigate]({

        type: 'standard__recordPage',

        attributes: {

            recordId : this.recordId,

            objectApiName: 'Contact',

            actionName: 'edit'

        },

    });

}

}

navigationSampleLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>52.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>

Now, Let's add this component on contact record detail page.

You can also use lightning navigation to:

• Navigate to custom application

navigateToMyCustApp() {

        this[NavigationMixin.Navigate]({

            type: 'standard__app',

            attributes: {

                appTarget: 'c__MyCustApp',

            }

        });

    }

• Navigate to external URL

navigateToMyBlog() {

        this[NavigationMixin.Navigate]({

            type: 'standard__webPage',

            attributes: {

                url: 'https://www.sfdc-lightning.com/'

            }

        });

    }

• Navigate to custom tab

 navigateToMyCustomTab() {

        this[NavigationMixin.Navigate]({

            type: 'standard__navItemPage',

            attributes: {

                apiName: 'CustomTabName'

            },

        });

    }

• Navigate to Related List

navigateToConRelatedList() {

        this[NavigationMixin.Navigate]({

    type: 'standard__recordRelationshipPage',

    attributes: {

        recordId: this.recordId,

        objectApiName: 'Case',

        relationshipApiName: 'CaseComments',

        actionName: 'view'

    }

});

    }

• Navigate to Custom Aura Component

Note: To navigate from one LWC to another LWC we need to embed target LWC in AURA component having lightning:isUrlAddressable and navigate the user from LWC to AURA component.

 navigateToAuraComp(){

        this[NavigationMixin.Navigate]({

            type: 'standard__component',

            attributes: {

                componentName: 'c__AuraComponentName'

            },

          state: {

        // Under state we can pass value to Aura Comp attribute

    }

        });

    }