Hello everyone! In this blog post, we will discuss how to navigate between a Lightning Web Component (LWC) and an Aura component. This topic is quite interesting and relevant, as it came up during one of my job interviews. The interviewer asked if it was possible to navigate from a LWC component to an Aura component, and even though I was certain I had implemented this feature in one of my projects, the interviewer was not convinced. Therefore, I decided to write this blog post to explain the process in detail.
Prerequisite
- Have knowledge of some work around LWC and Aura in salesforce.
- Knowledge about Navigation services in LWC
Steps
- Create an Aura component which implements lightning:isUrlAddressable.
- Create a LWC component which extends the NavigationMixin function.
- Finally Navigate to our Aura Component by using Navigation services.
Before moving let understand something about lightning:isUrlAddressable and Navigation
lightning:isUrlAddressable is an interface in the Lightning Component framework that allows a Lightning component to be used as a target for a URL. When a component implements the lightning:isUrlAddressable interface, it can be navigated directly using a URL, with parameters passed in the URL that can be used by the component.
In Lightning Web Components (LWC), navigation refers to the process of directing the user to a specific page or action in the Salesforce org. The lightning/navigation module provides a set of methods to navigate programmatically from one page to another, without the need for the user to manually click on buttons or links.
Now lets begin with our Aura component Navigation.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction
,lightning:isUrlAddressable" access="global">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:card footer="Card Footer" title="Hello">
<p><lightning:formattedText value="Email salesforce.com and info.salesforce.com" /></p>
<p><lightning:formattedText value="Email [email protected]" /></p>
<p><lightning:formattedText linkify="true" value="Email salesforce.com and info.salesforce.com" /></p>
<p><lightning:formattedText linkify="true" value="Email [email protected]" /></p>
</lightning:card>
</aura:component>
Controller
({
doInit: function(cmp) {
alert('test');
}
})
Now lets move to our LWC component
Use Navigation service in that format in your LWC JS file to Navigate to Aura Component.
this[NavigationMixin.Navigate]({
type: "standard__component",
attributes: {
componentName: "c__Navigation"
},
state: {
c__id: this.recordId
}
});
Here c__Navigation is our Aura component name which we created above.
Demo
Things to be noticed here
f you navigate to an Aura component URL from a Lightning Web Component (LWC) using the NavigationMixin and lightning/navigation module, the LWC component will be disconnected from the DOM and destroyed, and the Aura component will be loaded in its place. This is because the Aura component is a separate framework and technology from LWC, and the two cannot coexist in the same DOM tree.
When you use the NavigationMixin to navigate to an Aura component URL, a new page request is made to the Salesforce server, which loads the Aura component in a separate container. This means that the LWC component and its associated JavaScript and CSS files are unloaded from the DOM, and any state or data that was stored in memory is lost.
If you need to preserve state or data between the LWC and Aura components, you can use query parameters or localStorage to pass data between the two. For example, you could pass a unique identifier for the record you want to view or edit as a query parameter, and then use that identifier to fetch the record data in the Aura component.
You can get full code from here
