How to Navigate within Lightning Components
Table of Content
In this blog, we will learn how to navigate within Lightning Components. Let’s get started!
Event Used
We will be using force:navigateToComponent. It allows us to navigate from one component to another. Still, we should keep following points in mind:
- Through this event we can only navigate to Components.
- The access of the component should be set to global.
- It will not work in app.app, the navigation will only work within tab.
- Also, the URL generated through this event is not permanent, it keeps on changing as we navigate.
Navigating within Lightning Components
Now, let’s get started with the code.
Component 1 :
<aura:component implements="force:appHostable" access="global" >
<!--
/**
* Webkul Software.
*
* @category Webkul
* @author Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
-->
<pre>
Hello! <br/>
This is Component 1<br/>
</pre>
<lightning:button variant="brand" label="Go to Component 2" onclick="{!c.NavigatetoC2}" />
</aura:component>
Component 1 controller :
({
/**
* Webkul Software.
*
* @category Webkul
* @author Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
NavigatetoC2 : function(component, event, helper) {
console.log('Enter Here');
var evt = $A.get("e.force:navigateToComponent");
console.log('evt'+evt);
evt.setParams({
componentDef: "c:Component2"
//componentAttributes :{ }
});
evt.fire();
}
})
Controller 2:
<aura:component implements="force:appHostable" access="global" >
<!--
/**
* Webkul Software.
*
* @category Webkul
* @author Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
-->
<pre>
Hello! <br/>
This is Component 2<br/>
</pre>
<lightning:button variant="brand" label="Go to Component 1" onclick="{!c.NavigatetoC1}" />
</aura:component>
Component 2 controller :
({
/**
* Webkul Software.
*
* @category Webkul
* @author Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
NavigatetoC1 : function(component, event, helper) {
var evt = $A.get("e.force:navigateToComponent");
evt.setParams({
componentDef : "c:Component1"
//componentAttributes: {}
});
evt.fire();
}
})
Output
For output, you have to create a Lightning Tab using one of the components, and add it to an app through App Manager.
Component 1:
Component 2:
Support
That’s all for how to navigate within Lightning Components, still, if you have any issue feel free to add a ticket and let us know your views to make the code better https://webkul.uvdesk.com/en/customer/create-ticket/
View Comments
Comment or Ask a Question
Quick Links