How to navigate from one Lightning Web Component to another Lightning Web Component?

 In this blog post we will learn "How to navigate from one Lightning Web Component to another Lightning Web Component?".

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

Let's understand this with an example.

Let's create two LWC and one AURA component.

sourceLWC --> A lwc from where we will navigate.

targetLWC --> A lwc where we will navigate.

navigateToLWCAuraComp --> An aura component containing "targetLWC " to make navigation possible.

sourceLWC .html

<template>

    <lightning-button variant="success" label="Navigate to targetLWC" onclick={navigatetotargetlwccomp}></lightning-button>

</template>

sourceLWC.js

import { LightningElement } from 'lwc';

import {NavigationMixin} from 'lightning/navigation';

 

export default class SourceLWC extends NavigationMixin(LightningElement) {

    navigatetotargetlwccomp(){

        this[NavigationMixin.Navigate]({

 

            type: 'standard__component',

   

            attributes: {

   

                componentName: "c__navigateToLWCAuraComp"

   

            },

            state: {

                c__propertyValue: '500'

            }

   

        });

    }

}

sourceLWC.js-meta.xml

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

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

    <apiVersion>54.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>

navigateToLWCAuraComp.cmp

<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable" access="global">

    <aura:attribute type="String" name="propertyValue"/>

    <aura:handler name="init" value="{!this}" action="{!c.init}"/>

<c:targetLWC propertyValue="{!v.propertyValue}"></c:targetLWC>

</aura:component>       

navigateToLWCAuraCompController.js

({

    init: function(cmp, evt, helper) {

        var myPageRef = cmp.get("v.pageReference");

        var propertyValue = myPageRef.state.c__propertyValue;

        cmp.set("v.propertyValue", propertyValue);

    }

})

targetLWC.html

<template>

 <b>   Hi I am targetLWC component. Value from target LWC is {propertyValue} </b>

</template>

targetLWC.js

import { LightningElement,api } from 'lwc';

 

export default class TargetLWC extends LightningElement {

 

    @api propertyValue;

}

targetLWC.js-meta.xml

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

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

    <apiVersion>54.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>

Results:

Click on the button "Navigate to targetLWC",