Steps To Navigate Within Salesforce Lightning Components

Hi!

As we know there is a tag force:navigateToComponent use to navigate within the Salesforce Lightning component. So here we will use this tag to learn how to navigate within the component from one to another. Using this event the URL generated is not permanent as we navigate from one to another and we will use this event only for tab not as a Lightning app.

Step1: Create a Lightning Parent Component

<aura:component implements="force:appHostable" access="global" >
    Hello Forcetalk! <br/>
    This is Parent Component <br/>
    <lightning:button variant="brand" label="Go to Child Component " onclick="{!c.NavigatetoChildComp}" />
</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"
            //componentAttributes :{ }
        });
        evt.fire();
    }
})

Step3: Create Child Component

<aura:component implements="force:appHostable" access="global">
    Hello! <br/>
    This is Component 2<br/>
    <lightning:button variant="brand" label="Go to Component Parent" onclick="{!c.NavigatetoParentComp}" />
</aura:component>

Step4: Create Child controller

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

Now, we have to create Lightning Tab and then go to App Manager to add this component.
See Component 1: