Navigation in LWC

Navigation is an important part of any UI application for example-If you want to redirect a page to another page after clicking the button. To navigate in Lightning Experience, Lightning Communities, and the Salesforce app, use the navigation service, lightning/navigation.

The lightning/navigation service is supported only in Lightning Experience, Lightning Communities, and the Salesforce app. It isn’t supported in other containers, such as Lightning Components for Visualforce, or Lightning Out.

Use the navigation service, lightning/navigation, to navigate to many different page types:

• Records

• List views

• Tab

• Open files

• Home Page

The navigation service adds two APIs to your component's class. Since these APIs are methods on the class, invoke them from this.

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

2. [NavigationMixin.GenerateUrl](pageReference)
   A component calls this[NavigationMixin.GenerateUrl] 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.

Use the Navigation Service

Step 1: Import NavigationMixin from lightning/navigation

import { NavigationMixin } from 'lightning/navigation';

Step 2: Extends NavigationMixin(LightningElement)

export default class NavToHome extends NavigationMixin(LightningElement){

}

Step 3: Create a PageReference object that defines the page. You can create different types of PageReference. Below items are supported. Please refer link 

• App (standard__app)

• Lightning Component (standard__component)

• Knowledge Article (standard__knowledgeArticlePage)

• Login Page

• Named Page (Communities)

• Named Page (Standard)

• Navigation Item Page (standard__navItemPage)

• Object Page (standard__objectPage)

• Record Page (standard__recordPage)

• Record Relationship Page

• Web Page (standard__webPage)

this.HomePageReference ={

           type: 'standard__namedPage',

           attributes: {

               pageName: 'home'

           }

       };

Step 4: Invoke Navigation service’s function

this[NavigationMixin.Navigate](this.HomePageRef);

Example-

Create a Button to Redirect to Home Page. 

Use standard__namedPage while creating PageReference object. You can use Home,Chatter in the attribute. Please click to get more about types.

LWC_NavHome.html

<template>

   <lightning-card>

       <lightning-button

           label="Go to Home"

           class="slds-var-m-around_medium"

           onclick={navigateToHome}></lightning-button>

       </lightning-card>

</template>

LWC_NavHome.js

import { LightningElement } from 'lwc';

//Step 1: Import NavigationMixin from lightning/navigation

import {NavigationMixin} from 'lightning/navigation';

//Step 2: Extends NavigationMixin(LightningElement)

export default class LWC_NavHome extends NavigationMixin(LightningElement) {

   navigateToHome(){

       //Step 3:  Create PageReference object that defines the page

       this.HomePageReference ={

           type: 'standard__namedPage',

           attributes: {

               pageName: 'home'

           }

       };

       //Step 4: Invoke Navigation service’s function

      this[NavigationMixin.Navigate](this.HomePageReference);

   }

}

LWC_NavHome.js-meta.xml

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

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

   <apiVersion>49.0</apiVersion>

   <isExposed>true</isExposed>

   <targets>

       <target>lightning__AppPage</target>

       <target>lightning__RecordPage</target>

       <target>lightning__HomePage</target>

   </targets>

</LightningComponentBundle>