Directly Navigate to Lightning Web Component without Using Aura Component

Lightning Web Component framework allows you to navigate to Lightning Web Component from another Lightning Web Component using Using PageReference Object of Lightning Component Type(Works only in Lightning Experience, Salesforce Mobile App). The problem here is you need to create one additional Aura Component having lightning:isUrlAddressable added as interface to enable direct navigation to a Lightning Component via URL. In this blog, We are going to see a way to navigate to Lightning Web Component directly from another Lightning Web Component without needing any Aura Component.

Let’s Create two Lightning Web Component to test out this feature. They are:-

1. navigateFromLwc
2. targetLwcComponent

In our use case, There will be a button on navigateFromLwc which will navigate users to targetLwcComponent.

navigateFromLwc.html

This html file has a button with label name Navigate To LWC which will navigate user to another lightning web component 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 has the handleNavigate method defined bind with button in html markup. It will create a URL in Base64 encoded form. This URL will be later used with lightning-navigation service to navigate to the component using PageReference Object of web page Type.

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class NavigateFromLwc extends NavigationMixin(LightningElement) {
    handleNavigate() {
        var compDefinition = {
            componentDef: "c:targetLwcComponent",
            attributes: {
                propertyValue: "500"
            }
        };
        // Base64 encode the compDefinition JS object
        var encodedCompDef = btoa(JSON.stringify(compDefinition));
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: '/one/one.app#' + encodedCompDef
            }
        });
    }
}

navigateFromLwc.js-meta.xml

<?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>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>

Let’s see the code for targetLwcComponent Lightning Web Component.

targetLwcComponent.html

The html file of this component has the property value passed with navigation to Lightning Web Component.

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

targetLwcComponent.js

The public property here can be set from any other component. In our case, we are passing the value of the property of this component from another component.

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>

Demo – Navigate Directly To Lightning Web Component