Invoking one component from another component through Button

Question

Getting below error while clicking on button

This page has an error. You might just need to refresh it. Action failed: c:TestRateCard$controller$callMe [Cannot read property 'setParams' of undefined] Failing descriptor: {c:TestRateCard$controller$callMe}

 <!-- Component One : TestRateCard-->

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction,force:appHostable" access="global" >
     <aura:attribute name="accId" type="String" access="global"/>
    Component One
    <lightning:button label="Create Case"  onclick="{!c.callMe }" />
</aura:component>

({
callMe  : function(component, event, helper){
            console.log('Enter Here');
        var evt = $A.get("e.force:navigateToMyComponent");
        console.log('Event '+evt);
        var accountFromId = component.get("v.accId");
        evt.setParams({
            componentDef  : "c:TestRateCardTwo" ,
            componentAttributes : {
                accountId : accountFromId
            }
        });    
        evt.fire();
}
})

<!-- Component Two : TestRateCardTwo-->

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction,force:appHostable" access="global" >
        <aura:attribute  name="accountId" type="String" access="global"/>

    Second Component

</aura:component>

Answer 1

You have written var evt = $A.get("e.force:navigateToMyComponent");

where as it should be :- var evt = $A.get("e.force:navigateToComponent");

See the difference navigateToMyComponent and navigateToComponent. There is no such event with name navigateToMyComponent in Aura Framework.

Read the docs here:- Navigate To Component

Ideally, you should use lightning:navigation to navigate.

Answer 2

You should use lightning:isUrlAddressable Interface to navigate the component, You can also pass the attributes. Note : component will open in new tab

The lightning:isUrlAddressable interface extends the lightning:hasPageReference interface. A component that implements lightning:isUrlAddressable then gets access to the page state through the pageReference attribute. The page state is a representation of the current URL query parameters.

Starting in API version 43.0, the force:navigateToComponent event is deprecated as per the doc