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.