Component call another lightning component

Question

I have created a lightning component onclick button call a js function. Js function is there.

callAuthComponent : function(component, event, helper){

  console.log('call......');

    var evt = $A.get("e.force:navigateToComponent"); 
    evt.setParams({
        componentDef:"c:getAuthComponent",
    });
    evt.fire();
 }

But get the following error:

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

Why do I get this error? How can I fix it?

Answer 1

Try using lightning:navigation. As per the documentation examples here, you can setup your PageReference like this (note this PageReference is for navigating to the Account home tab):

var navService = cmp.find("navService");

// Sets the route to /lightning/o/Account/home
var pageReference = {
    type: 'standard__objectPage',
    attributes: {
        objectApiName: 'Account',
        actionName: 'home'
    }
};
cmp.set("v.pageReference", pageReference);

Once you've setup your PageReference specifically for you lightning component, using standard__component as the type to point to your custom component (see PageReference - Lightning Component Type, you can use the following to navigate to it:

// Get your navService library component
let navService = cmp.find("navService");

// Use navService to setup the right PageReference object
const pageReference = cmp.get("v.pageReference");

// Actually navigate to your component
navService.navigate(pageReference);