Salesforce | Navigation Service in LWC | All You Need to Know

The lightning/navigation service is used to navigate in Lightning Experience, Lightning Communities, and Salesforce Applications. Lightning Navigation Services Web Components are used to navigate to Record Pages, Web Pages, Objects, List Views, Custom Tabs, Related Lists, Files, and so on. 

Instead of a URL, Navigation Service employs a Page Reference. It is a JavaScript object that provides information about the Page Type, attributes, and state. 

The Page Reference protects a component from future changes to URL formats. Page type (String) and attributes (Object) are required parameters, while the state (Object) is optional. To use the navigation service in Lightning Web Components, first, import it into the JavaScript file. 

Adding two API to the component’s class: 

1. NavigateMixin.Navigate: It is used to navigate another different page in an application. 
2. NavigateMixin.GenerateURL: In order to obtain a promise that resolves to the resulting URL. The URL can be used in the anchor’s href attribute. It can use the Browser API – Window. open to open a new window based on the URL (url) . 

Example of Navigation Service in Lightning Web Components 

DemoNavigationService.html 

<template> 
    <lightning-card title="Navigation Service"> 
        <div class="slds-p-left_medium"> 
            <lightning-button label="New Case" onclick={navigateToNewCasePage}></lightning-button> 
        </div> 
    </lightning-card> 
</template>

Don’t forget to check out: What is Salesforce Lightning Web Component and How to Use it?

DemoNavigationService.js 

import { LightningElement } from 'lwc'; 
import { NavigationMixin } from 'lightning/navigation'; 
export default class SampleNavigationService extends NavigationMixin(LightningElement) { 
     navigateToNewCasePage() { 
       this[NavigationMixin.Navigate]({ 
            type: 'standard__objectPage', 
            attributes: { 
                objectApiName: 'Case', 
                actionName: 'new' 
            }, 
        }); 
    } 
}

How to Navigate to Case Home Page?

basicNavigation.html 

<template> 
    <lightning-card title="Case Home Page Navigation"> 
        <div class="slds-p-left_medium"> 
            <a href={refUrl} onclick={handleNavigationClick}>Case Home</a> 
        </div> 
    </lightning-card> 
</template>

basicNavigation.js 

import { LightningElement, wire } from 'lwc'; 
import { NavigationMixin } from 'lightning/navigation'; 
 export default class BasicNavigation extends NavigationMixin(LightningElement) { 
   refUrl; 
     connectedCallback() { 
        this.caseHomePageRef = { 
            type: 'standard__objectPage', 
            attributes: { 
                objectApiName: 'Case', 
                actionName: 'home'
            } 
        }; 
        this[NavigationMixin.GenerateUrl](this.caseHomePageRef) 
            .then(url => this.refUrl = url); 
    } 
    handleNavigationClick(evt) { 
        evt.preventDefault(); 
        evt.stopPropagation(); 
        this[NavigationMixin.Navigate](this.caseHomePageRef); 
    } 
}

Check out another amazing blog here: How to Call the Apex Method Imperatively in Lightning Web Component?

How to Navigate to the Record Page?

navigateToViewCasePage() { 
        this[NavigationMixin.Navigate]({ 
            type: 'standard__recordPage', 
            attributes: { 
                recordId: this.recId, 
                objectApiName: 'Case', 
                actionName: 'view' 
            }, 
        }); 
    }