Navigate Using force:navigateToComponent Within Salesforce Lightning Component

May 8, 2019

In this post we will learn about the tag force:navigatetoComponent is use to navigate within the Salesforce Lightning Component. Here we are going to learn navigation within component using Event that navigate only for tab not as a Lightning app.

Step1: Create a Parent Lightning Component

<aura:component implements="force:appHostable" access="global"></aura:component>

Step2: Create Parent Controller

({
NavigatetoChildComp : function(component, event, helper) {
console.log('Enter Here');
var evt = $A.get("e.force:navigateToComponent");
console.log('evt'+evt);
evt.setParams({
componentDef: "c:Component2"

});
evt.fire();
}
})

Step3: Create Child Lightning Component


<aura:component implements="force:appHostable" access="global"></aura:component>

Step4: Create Child controller

({
NavigatetoParentComp : function(component, event, helper) {
var evt = $A.get("e.force:navigateToComponent");
evt.setParams({
componentDef : "c:Component1"

});
evt.fire();
}
})

Now, we have to create one Lightning Tab.Go to App Manager add this Lightning component to this tab.