Navigate from one LWC component to another LWC component with/without Aura

To navigate in Lightning Experience, Experience Builder sites, or the Salesforce mobile app, we define a PageReference object. The PageReference type generates a unique URL format and defines attributes that apply to all pages of that type. Lightning web components allows us to navigate from one LWC component to another LWC by using these different page reference types and they are equally supported in lightning experience and salesforce mobile app. 

Now consider you have one LWC component, hereafter we will name it as sourceLWC, and another LWC component which will be called as targetLWC. Now if you want to navigate from sourceLWC to targetLWC, we have couple of approaches.

1. Navigation using AURA: To make a lightning component url Addressable, we have to implement isUrlAddressable interface in the component. This is only available in AURA and currently no support exists in LWC. So bind your targetLWC component in the targetLWCAura which implements isUrlAddressable interface.
2. Navigation without using AURA: We all are aware that any url that is rendered fully, becomes a standard web page. So using the standard__webPage of many available PageReference types in lightning navigation in conjunction with /one/one.app# hash url, we can make the LWC addressable. In order to make our LWC fully addressable, we also have to encode our component definition to base64 before passing it to url navigation.

Having gone through with the above design and approaches, let's make it work. Do create LWC components and AURA component as outlined below:

1. sourceLWC
2. targetLWC
3. targetLWCAura

As we have understood enough on the implementation approach and code is self explanatory so we will jump directly on code part.

sourceLWC.html

<template>
    <div class="slds-card">
        <div class="slds-box">
            <lightning-button label="Navigate To Another LWC Without Using Aura"
                title="Navigate To Another LWC Without Using Aura" onclick={navitageToLWCWithoutAura} variant="success">
            </lightning-button>
        </div>
        <div class="slds-box">
            <lightning-button label="Navigate To Another LWC Using Aura"
                title="Navigate To Another LWC Without Using Aura" onclick={navitageToLWCUsingAura} variant="brand">
            </lightning-button>
        </div>
    </div>
</template>

sourceLWC.js

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
 
export default class SourceLWC extends NavigationMixin(LightningElement) {
    // navigate to another LWC without Aura
    navitageToLWCWithoutAura(event) {
        event.preventDefault();
        let componentDef = {
            componentDef: "c:targetLWC",
            attributes: {
                label: 'Navigated From Another LWC Without Using Aura'
            }
        };
        // Encode the componentDefinition JS object to Base64 format to make it url addressable
        let encodedComponentDef = btoa(JSON.stringify(componentDef));
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: '/one/one.app#' + encodedComponentDef
            }
        });
    }
 
    // navigate to another LWC using Aura
    navitageToLWCUsingAura(event) {
        event.preventDefault();
        this[NavigationMixin.Navigate]({
            type: 'standard__component',
            attributes: {
                componentName: 'c__targetLWCAura'//aura component name
            }
        });
    }
}

sourceLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

targetLWC.html

<template>
    <div class="slds-card slds-var-p-around_small">
        {label}
    </div>
</template>

targetLWC.js

import { LightningElement, api } from 'lwc';
 
export default class TargetLWC extends LightningElement {
    @api label;
}

targetLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

targetLWCAura.cmp

<aura:component implements="lightning:isUrlAddressable">
    <c:targetLWC label="Navigated From Another LWC Using Aura"/>
</aura:component>

Demo Time:

Now as you have developed and deployed your code base to your org, embed your sourceLWC component on the home page of your app to test our implementation.

Note: Notice the url formed with our these examples of navigation,

• Navigation using AURA:

  https://einsteinyogi-dev-ed.lightning.force.com/lightning/cmp/c__targetLWCAura

• Navigation without using AURA

  https://einsteinyogi-dev-ed.lightning.force.com/one/one.app#eyJjb21wb25lbnREZWYiOiJjOnRhcmdldExXQyIsImF0dHJpYnV0ZXMiOnsibGFiZWwiOiJOYXZpZ2F0ZWQgRnJvbSBBbm90aGVyIExXQyBXaXRob3V0IFVzaW5nIEF1cmEifSwic3RhdGUiOnt9fQ%3D%3D

← Configuring Events and PropagationInfinite Loading in Lightning Datatable →

If you like this blog content and find inciteful, please comment and let me know.