Navigate to lightning web component from Another Lightning web component

Are you looking for navigating to Lightning Web Component from another Lightning Web Component in Lightning Experience, Salesforce Mobile App?

Using PageReference Object of Lightning Component Type(Works only in Lightning Experience, Salesforce Mobile App)

To navigate from one Lightning Web Component to another Lightning Web Component, You need to add the target Lightning Web Component inside an Aura Component having lightning:isUrlAddressable is added as interface. To enable direct navigation to a Lightning component via URL, add the lightning:isUrlAddressable interface to the component.

Let’s create two lightning web component and one Aura component to test this feature.

1. navigateFromLwc – A Lightning web component from where we will navigate
2. targetLwcComponent – A Lightning web component where we will navigate
3. NavigateToLWC – An Aura Component contains the targetLwcComponent to make navigation possible

navigateFromLwc.html

The html file has a button which will fire the handleNavigate method onclick of it.

<template>
    <lightning-button variant="success" label="Navigate To LWC" title="Successful action" onclick={handleNavigate}
        class="slds-m-left_x-small"></lightning-button>
</template>

navigateFromLwc.js

The js file is using lightning-navigation service wire adapters and functions to generate a URL or navigate to a page reference. The page reference type is standard__component and component name where it is navigating is NavigateToLWC(Aura component). We are also passing property value to target component while navigating.

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class NavigateFromLwc extends NavigationMixin(LightningElement) {
    handleNavigate() {
        this[NavigationMixin.Navigate]({
            type: "standard__component",
            attributes: {
                componentName: "c__NavigateToLWC"
            },
            state: {
                c__propertyValue: '500'
            }
        });
    }
}

navigateFromLwc.js-meta.xml

The xml file defines the metadata definition of the component. This component can be used on App, record and Home page in Lightning Experience.

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

targetLwcComponent.html

This is our target Web Component where we will navigate. We will use this component inside an Aura Component so that this component can be navigated from any other Lightning Web Component.

<template>
    Navigated from LWC with property Value is : {propertyValue}
</template>

targetLwcComponent.js

import { LightningElement, api } from 'lwc';

export default class TargetLwcComponent extends LightningElement {
    @api propertyValue;
}

targetLwcComponent.js-meta.xml

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

NavigateToLWC.cmp

The Aura component implements the lightning:isUrlAddressable interface and has init handler. The Lightning Web Component is called inside it.

<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable" access="global">
    <aura:attribute type="String" name="propertyValue"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>    
    <div class="slds-card">
        <c:targetLwcComponent propertyValue="{!v.propertyValue}"/>
    </div>
</aura:component>

NavigateToLWCController.js

The init handler of the component fetch property value from the pagereference URL and set the property value defined in the component markup. This property value will be passed to Lightning Web Component called inside it.

({
    init: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var propertyValue = myPageRef.state.c__propertyValue;
        cmp.set("v.propertyValue", propertyValue);
    }
})

Demo