How to Navigate from LWC to an Aura Component in Salesforce

In plain words: While Lightning Web Components (LWC) are the future of Salesforce development, you likely still have legacy Aura Components in your org. To make a seamless transition, your new LWCs must be able to route users to those existing Aura pages. By using the standard NavigationMixin service in LWC, you can easily open an Aura Component without writing hacky workarounds.

In the past, developers often relied on firing custom events wrapped in Aura containers to navigate between frameworks. However, Salesforce has standardized this process using the lightning/navigation module.

In this guide, we will walk through the exact steps to configure an Aura Component to accept incoming traffic, and write the LWC code required to send users there.

Step 1: Prepare the Target Aura Component

Before an LWC can route to an Aura Component, the Aura Component must explicitly declare that it can be reached via a URL. You do this by implementing the lightning:isUrlAddressable interface.

Let's create an Aura Component named TargetAuraComponent. Open your Salesforce CLI or Developer Console and update the .cmp file:

<!-- TargetAuraComponent.cmp -->
<aura:component implements="lightning:isUrlAddressable,flexipage:availableForAllPageTypes" access="global">
    
    <div class="slds-card slds-p-around_medium">
        <h1 class="slds-text-heading_large">Hello from the Aura Component!</h1>
        <p class="slds-m-top_medium">You have successfully navigated here from an LWC.</p>
    </div>

</aura:component>

Step 2: Create the Originating LWC

Now, let's create the Lightning Web Component that will trigger the navigation. We will add a simple button to our HTML template.

LWC HTML Template (navigateLwc.html):

<template>
    <lightning-card title="LWC Navigation Hub" icon-name="standard:portal">
        <div class="slds-m-around_medium">
            <p class="slds-m-bottom_medium">Click the button below to open the Aura Component.</p>
            <lightning-button 
                label="Go to Aura Component" 
                variant="brand" 
                onclick={navigateToAura}>
            </lightning-button>
        </div>
    </lightning-card>
</template>

Step 3: Write the LWC Navigation Logic

In our JavaScript file, we need to import the NavigationMixin from lightning/navigation. This powerful service allows us to use standard routing features without hardcoding URLs.

LWC JavaScript (navigateLwc.js):

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

// Wrap the class with the NavigationMixin
export default class NavigateLwc extends NavigationMixin(LightningElement) {
    
    navigateToAura() {
        this[NavigationMixin.Navigate]({
            type: 'standard__component',
            attributes: {
                // Point to the Aura Component. 
                // Notice the "c__" prefix!
                componentName: 'c__TargetAuraComponent' 
            },
            state: {
                // Optional: Pass parameters to the Aura component
                c__myParameter: 'Hello Aura, this is LWC!'
            }
        });
    }
}

Developer Trap: The c__ Prefix
The most common mistake developers make here is setting the componentName to c:TargetAuraComponent. When routing using the NavigationMixin, you must use a double underscore for the namespace: c__TargetAuraComponent. If you use a colon, the navigation will silently fail!

Step 4: Passing Parameters (Optional but Highly Recommended)

Notice the state object in the code above? You can pass data (like a Record ID) from the LWC to the Aura Component.

Real-Life Example: Reading the Passed Parameter in Aura
If you want your Aura Component to read the parameter we just sent from the LWC, you need an init handler in your Aura component:

Aura Controller (JS):
doInit : function(component, event, helper) {
    var myPageRef = component.get("v.pageReference");
    var myParam = myPageRef.state.c__myParameter;
    console.log("Parameter received: " + myParam);
}

360 Card: LWC to Aura Routing Checklist

• Aura Interface: Must implement lightning:isUrlAddressable.
• LWC Import: Import NavigationMixin from lightning/navigation.
• LWC Class: Extend your class using NavigationMixin(LightningElement).
• Target Format: Use standard__component as the navigation type.
• Namespace: Always use c__ComponentName (double underscore).

Conclusion

Using the NavigationMixin is the cleanest, most scalable way to bridge the gap between Lightning Web Components and legacy Aura Components. By implementing the lightning:isUrlAddressable interface on the Aura side and correctly formatting your component name with the c__ prefix on the LWC side, you can ensure a seamless, professional user experience across your entire Salesforce org.

Happy coding!