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.


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',

"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


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 Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 5 Comments

  1. 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.


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

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

    2. Thank you for making the blogs,videos and interview questions and encouraging to learn more and more . Glad to meet you in BLRDEVX. you are simply superb!

  2. Hi,
    I have similar requirement it works fine for Desktop but on mobile salesforce app, it does not change the record id and keeps opening the same record. I have tried aura:valuechange event has well on pagereference attribute but no success.

  3. Manish, your blog is one of the most helpful developer blogs I’ve encountered. I’ve been struggling all day to pass a variable from a lightning component with a row action to another lightning component, and it was this post that finally helped me. I have also saved and used (on more than one occasion) your post about editable data tables. You are very, very helpful! Thank you!

Leave a Reply

Close Menu