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/
Be the first to comment.