function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Herish SurendranHerish Surendran 

How to navigate from one lightning component to another

({
	navigate : function(component, event, helper) {
        var navigateEvent = $A.get("e.force:navigateToComponent");
        navigateEvent.setParams({
            componentDef: "c.RegistrationFormTutorial"
        });
        navigateEvent.fire();
	}
})

I want to navigate from one lightning component to another component (RegistrationFormTutorial). I have written the above code. But I am getting error like this:


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

Could anyone please help me on this. Thanks in advance.
Best Answer chosen by Herish Surendran
Maharajan CMaharajan C
Hi Herish,

If you are trying    e.force:navigateToComponent   in Lightning Application then you will get this error message. Most of the Lightning events will not work in Lightning Application.

If you are trying the same component in record Page or in home page then it will work.

Otherwise lightning:navigation service.

Thanks,
Maharajan.C

All Answers

Maharajan CMaharajan C
Hi,

Try the below one:

In the componentDef you have to use the colon after namespace not the dot operator.

({
navigate : function(component, event, helper) {
        var navigateEvent = $A.get("e.force:navigateToComponent");
        navigateEvent.setParams({
            componentDef: "c:RegistrationFormTutorial"
        });
        navigateEvent.fire();
    }
})


https://developer.salesforce.com/docs/component-library/bundle/force:navigateToComponent/documentation

Thanks,
Maharajan.C
Herish SurendranHerish Surendran

No. It didn't help
Herish SurendranHerish Surendran
I am receiving the same error

" This page has an error. You might just need to refresh it. Action failed: c:HtmlTryout$controller$navigate [Cannot read property 'setParams' of undefined] Failing descriptor: {c:HtmlTryout$controller$navigate} "
Maharajan CMaharajan C
Hi Herish,

If you are trying    e.force:navigateToComponent   in Lightning Application then you will get this error message. Most of the Lightning events will not work in Lightning Application.

If you are trying the same component in record Page or in home page then it will work.

Otherwise lightning:navigation service.

Thanks,
Maharajan.C
This was selected as the best answer