Lighting Web Component

Navigation to an Aura Component from a Lightning Web Component

At times we do have to navigate the user to an Aura Component from Lightning Web Component. Let's look at how to implement it.

Teja

Feb 20, 2021 • 1 min read

At times we do have to navigate the user to an Aura Component from Lightning Web Component.

Let's look at how something like that can be done.

Template file is going to be pretty much straightforward. We will be having a button and on click of the button user gets navigated.

<template>
  <lightning-button label="Send" onclick={handleClick}></lightning-button>
</template>

exploreNavComponent.html

This here is the template file (check the comments for the steps involved).

import { api, LightningElement } from "lwc";

//1. Import NavigationMixin from the package
import { NavigationMixin } from "lightning/navigation";

//2. Wrap LightningElement with in NavigationMixin
export default class ExploreNavComponent extends NavigationMixin(LightningElement) {

  handleClick() {
  
      //3. Create a config object with the destination details
    const navConfig = {
      type: "standard__component",
      attributes: {
        componentName: "c__ThDestinationComponent"
      },
      state: {
        c__anyThing: "Krishna Teja"
      }
    };

        //4. Invoke Naviate method
    this[NavigationMixin.Navigate](navConfig);
  }
}

exploreNavComponent.js

In the Aura Component, we need to invoked the init handler, because when the component is initialized we need to strip the data from the URL.

<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable">
    
      <!-- Am invoking init hadler -->
    <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
    
    <aura:attribute name="message" type="String" />
    {! v.message }
</aura:component>

destinationComponent.cmp

Here is the controller of the Aura Component.

You need to use the notation component.get('v.pageReference') and pageReference is a special type of attribute and we don't have to create an attribute with the name pageReference.

({
    doInit : function(component, event, helper) {
        
        let ref = component.get('v.pageReference');    
        
        //Am traversing down the object to fetch the data
        let message = ref.state.c__anyThing;
        
        //Assigning the data back to an attribute
        component.set( 'v.message', message);
    }
})

destinationComponentController.js

Hope this helps!