Navigate to Aura Component from LWC

Hello folks, today we will discuss the Navigate to Aura Component from LWC. We can directly navigate to the Aura component from the LWC component. We use the navigation service in the LWC for navigation.

Also, check this: Enable Debug mode for LWC

Key Highlights :

1. Use the Navigation service in LWC
2. Can Send parameters to Aura Component.

Code :

navLWC.HTML :

<template>
	<lightning-card variant="Narrow" title="Navigate to Aura Component from LWC" 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} class="slds-m-left_x-small"></lightning-button>
		</div>
	</lightning-card>
</template>

navLWC.JS :

First we create LWC source component. This is our source component where we click the button and navigate to Aura Component.

import { LightningElement } from "lwc";
import { NavigationMixin } from "lightning/navigation";
export default class NavLWC extends NavigationMixin(LightningElement) {
    handleLWCNavigate() {
        const navConfig = {
            type: "standard__component",
            attributes: {
                componentName: "c__TargetComp"
            },
            state: {
                c__param1: "Techdicer",
                c__param2: "Rijwan"
            }
        };
        this[NavigationMixin.Navigate](navConfig);
    }
}

navLWC.js-meta.xml :

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

Now we create the Aura component. This is our source component. We also show here the parameters which we send from the LWC component.

TargetComp.comp :

<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable">
    <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
    <aura:attribute name="param1" type="String" />
    <aura:attribute name="param2" type="String" />
    
    <lightning:card title="Navigate to Aura Component from LWC">
        <p class="slds-p-horizontal_small">
            Param 1 : {! v.param1 } <br/>
            Param 2 : {! v.param2 }
        </p>
    </lightning:card>
</aura:component>

TargetCompController.js :

({
    doInit : function(component, event, helper) {
        
        let ref = component.get('v.pageReference');    
        let param1 = ref.state.c__param1;
        let param2 = ref.state.c__param2;
        
        //Assigning the data back to an attribute
        component.set( 'v.param1', param1);
        component.set( 'v.param2', param2);
    }
})

Output :

Reference :

1. LWC Navigation
2. Navigation Service in Lightning Web Component (LWC) Salesforce