Navigate to an Aura Component from another Aura Component

Navigate to an Aura Component from another Aura Component

Lightning Framework is filled with a lot of features and one of them is to navigate between components.

With this article, we will learn how we can navigate between components and pass the attribute data.

Make Your Component URL Accessible

Navigation in Lightning component is not that straight forward and we need to take help from Base lightning components and interfaces.

If you want to navigate to a component, first you need to make that component available to be accessed directly by URL. To do that, you need to implement “lightning:isUrlAddressable” interface in your component.

lightning:isUrlAddressable interface extends the “lightning:hasPageReference” interface in the backend which allows it to access page state through pageRefence attribute. This means you can access the attribute values supplied in page state.

USE LIGHTNING NAVIGATION

Once you make your component URL accessible, you need to use lightning:navigation component to navigate to that particular component.

lightning:navigation component needs a page reference to navigate to another component, record page, object page or web page. Below is an example page reference object to navigate to another aura component:

var pageReference = {
type: 'standard__component',
attributes: {
componentName: 'c__CustomComponentName',
},
state:{

"c__attributeName" : "attribute value here"
}
};
  • In the above example, page reference type is “standard__component” which we need to use for component navigation.
  • attribute contains the component name proceeded with namespace you want to navigate to. In our case, ‘c’ is the namespace.
  • state defines the attributes you need to pass to another component.

Usage Example

In our example, we will be developing 2 components, one with “lightning:isUrlAddressable” interface where we will redirect. This component will edit the record which it receives from another component while navigation.

Another component will use “lightning:navigation” component to redirect to the first component and will pass the object name and record id to edit.

Component – UrlAddressableComponent

Controller – UrlAddressableComponent

Component – NavigatorComponent

Controller – NavigatorComponent

Server Controller – AccountController

Output

Check out the output of above code:

 

Check out more

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 2 Comments

  1. Avatar

    Hey Manish,

    I understand this only works with 2 different components and not with flexipage. I am trying to navigate to a wrapper component which is emedded in a flexipage and I am passing the ID but pageReference is returning null everytime. Any advice how I can deal with this? Any alternates? I cant change the wrapper component , somehow I need to make sure it gets the ID.

    Thanks
    Manju

    1. Avatar

      You can use “standard__navItemPage” page reference, and pass your flexipage tab name.
      Example:

      {
      type: 'standard__navItemPage',
      attributes: {
      apiName: 'MyCustomTabName'
      }
      }

Leave a Reply

Close Menu