Navigate from LWC component to another LWC Component

by Rijwan Mohmmed
0 comment

Hello friends, today we are going to discuss Navigate from one LWC component to another LWC Component. You cannot navigate from the Lightning Web component to the Lightning Web component directly.

Also, check this: Reset Lightning Input Fields in LWC


But we have a workaround, The user can navigate from one LWC to another by embedding the LWC in an Aura Component and then walking from the Aura Component to the LWC.

Key Highlights :

  1. Lightning components can be navigated directly via URL by adding the lightning:isUrlAddressable interface.
  2. We use the Navigation service in LWC.
  3. Navigate the Lightning web component to the Aura component and then in the Aura component, we will open our LWC component.

Code :

lWCSourceNavigation.HTML :

		<lightning-card variant="Narrow" title="LWC Navigation" icon-name="standard:recipe">
				<div class="slds-p-horizontal_small" style="text-align:center">
						<lightning-button variant="brand" label="Navigate to another LWC" title="Navigate to another LWC" onclick={handleLWCNavigate}


import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class LWCSourceNavigation extends NavigationMixin(LightningElement) {
    handleLWCNavigate() {
            type: "standard__component",
            attributes: {
                componentName: "c__NavigationHelper"
            state: {
                c__amount: 1000

lWCTargetNavigation.HTML :

		<lightning-card variant="Narrow" title="LWC Navigation Target" icon-name="standard:recipe">
				<div class="slds-p-horizontal_small" style="text-align:center">
								 Source transfer Value : {amount}

lWCTargetNavigation.JS :

import { LightningElement, api } from 'lwc';

export default class LWCTargetNavigation extends LightningElement {
    @api amount;

NavigationHelper.cmp :

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

NavigationHelperController.JS :

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

Output :


Reference :

  1. Navigation in LWC

You may also like

Leave a Comment