Navigation in Lightning Component : lightning:navigation

After Summer 18, force:navigateToComponent tag will be no longer in use means it will be deprecated. From now With the lightning:isUrlAddressable interface, you now control which Lightning components can be opened programmatically. You can also now easily capture URL parameters using the v.pageReference attribute and use the parameter values in your component. With the lightning:navigation component, define a pageReference object for navigating to a custom component that implements lightning:isUrlAddressable and set any attributes the component allows.Using lightning:navigation with pageReference provides the following benefits over the now deprecated force:navigateToComponent for standard navigation Lightning apps: –

Control and manage which URL parameters are used in your component.
Future-proofs your apps from changes in URL format.
Generates a user-friendly URL for these components.
A page reference is associated with a particular type, which provides a set of attributes that are applicable for all pages of that type. The following types are supported.

Knowledge Article Page
Lightning Component (must implement lightning:isUrlAddressable)
Named Page
Navigation Item Page
Object Page
Record Page
Record Relationship Page

Here is a simple Code for the same

Component Code

[codesyntax lang=”xml” container=”div” doclinks=”1″]

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:hasPageReference,lightning:isUrlAddressable" 
                access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <lightning:navigation aura:id="navigate" />
    <lightning:button label="Lightning Navigate" onclick="{!c.navigate}"
                      variant="brand"/>
    <!-- <lightning:button label="Lightning Navigate" onclick="{!c.navigate}" 
                      variant="brand" /> -->
</aura:component>

[/codesyntax]

Controller.js Code

[codesyntax lang=”javascript” container=”div” doclinks=”1″]

({
    doInit : function(component, event, helper) {
        
    },
    navigate : function(component, event, helper) {
        var nagigateLightning = component.find('navigate');
        var pageReference = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'list'
            },
            state: {
                filterName: 'MyAccounts'
            } 
        };
        nagigateLightning.navigate(pageReference);
    }
})

[/codesyntax]

Happy learning and Keep sharing 🙂

Resource: –

Salesforce Document

17 COMMENTS

SANTHOSH May 15, 2018 At 11:30 AM

hi i am getting this error:

No COMPONENT named markup://lightning:navigation found :

- AMIT SINGH May 15, 2018 At 1:19 PM
  
  Hi Santosh,
  
  Are you trying in Developer ORG? Please try in Summer 18 Preview Org or Try in Sandbox. You can try in Developer ORG after 14th June 2018 as Summer 18 will go live on June 14.
  
  Regards,
  SFDCPanther
  
Yoshitaka Minami June 24, 2018 At 10:49 PM

This Component acts good!
Thank you for your code!!

May I ask you a question?

In my organization,
It seems that we have to rewrite a parameter(“filterName”) from MyAccounts to MyAccounts’s SFID.
But, Lightning Components Developer Guide shows we should write list’s API Name.
Which is right, and could you act the upper code?
If you know, please teach me.

————————————————
state: {
filterName: ‘MyAccounts’ →→→ ’00BXXXXXXXXXXXX’
}
————————————————

Regards,
Amit Singh.

- AMIT SINGH June 25, 2018 At 7:01 AM
  
  Please try the List API Name. It will be like “MyAccounts_s_SFID” refer to the image
  
  - Yoshitaka Minami July 3, 2018 At 9:23 PM
    
    Hi, Amit,
    
    Thank you for your reply!
    Hmm，，，，
    I tried to do your Recommend, But It will not move again.
    (CustomView did the same behavior. )
    
Sairam Akella May 14, 2019 At 2:46 PM

Hi I want to open it in a new window

- SFDC Panther May 19, 2019 At 8:59 AM
  
  while using the navigate method to use another parameter as false. like navigate(PageRef, false).
  
  The second parameter Indicates that the new page should replace the current page in the navigation history. Reference Doc: – https://developer.salesforce.com/docs/component-library/bundle/lightning:navigation/specification
  
Nagaraju Mogili June 11, 2019 At 12:00 PM

Hi Amit,
I am interested to learn the Salesforce as much as I can, but unfortunately I Joined in a Small organization and there is no projects at all from the Last 2 years, with my skills and learning I am places in MNC. but still I am worrying about the Knowledge what I have right now, because I haven’t worked so far any project.
could you please suggest me how to learn the Lightnging skills, I am interested to learn the new skills. I am from Non- IT background.

- SFDC Panther June 12, 2019 At 12:47 PM
  
  Hi,
  
  Here are the few places where you can learn the development.
  
  1 – SFDC99
  2 – SFDCPanther (Blog and YouTube)
  3 – SFDCMonkey
  4 – SFDCFacts (Blog and YouTube)
  5 – Trailhead
  
  If you are going through with the above sites then you will be able to write the code in a very efficient way
  
  Thanks & Regards,
  Amit
  
Nagaraju Mogili June 11, 2019 At 12:44 PM

Hi Amit,
while working with the above code,getting the below error, currently I am using the Version 45.0

This page has an error. You might just need to refresh it.
[Cannot read property ‘setParams’ of undefined]

- SFDC Panther June 12, 2019 At 12:42 PM
  
  Where are you using this Component in Lightning Application?
  
  Use inside Lightning Environment
  
Manju June 28, 2019 At 10:22 PM

Hey,
From my component I am trying to navigate to a flexipage which has a wrapper component and I need to pass the record ID to this component so it can display. I am not able to figure this out and the flexipage displays a blank page. Here is my code below, any help is appreciated
**********************
redirectToQH : function(component, event, helper) {
var custId = component.get(“v.recordId”);
console.log(‘Here – custID – ‘+custId)

var navService = component.find(“navService”);
var pageReference = {
“type”: “standard__navItemPage”,
“attributes”: {
“apiName”: “FinancialHealthQuiz” —-> flexipage
},
“state”: {
“c__accId”: custId ——–> record ID
}
};
component.set(“v.pageReference”, pageReference);
navService.navigate(pageReference);

var url = ‘https://’+window.location.host+’/lightning/n/FinancialHealthQuiz?&c__accId=’+custId;
var urlEvent = $A.get(“e.force:navigateToURL”);
urlEvent.setParams({
“url”: url
});
urlEvent.fire();
**********************
in the wrapper component I am trying to retrieve it from pageReference but it’s returning empty
var pageReference = component.get(‘v.pageReference’);
if(pageReference) {
}

- SFDC Panther July 14, 2019 At 5:37 AM
  
  Hi Manju,
  
  Have you implemented the Required interfaces on both source and target components?
  
Shanjay August 1, 2019 At 10:55 PM

hi there !

I am trying to navigate in mobile in with the aura component but its not navigating me to the account Home page.

Regards,
Shanjay

- SFDC Panther August 8, 2019 At 9:46 AM
  
  Are you able to navigate in Lightning Experience because you should be able to do that
  
Dharmendra September 26, 2021 At 12:18 PM

Hi Amit,

Iam facing this challenge and not able to resolve this related to Lightning:Navigation. Please see below code where iam navigating to Standard Case Edit record. Record get navigated properly in edit form as modal box but on Save or Cancel, it is not redirecting back to View Mode. On Save, Edit modal box gets closed that its, and a blank screen displays.
var navService = component.find(“navService”);
var pageRef = {
type: “standard__recordPage”,
attributes: {
objectApiName: “Case”,
actionName: “edit”,
recordId: component.get(“v.recordId”)
},
state: {
nooverride: “1”
}

- SFDC Panther September 27, 2021 At 3:50 PM
  
  are you overriding the button with the Aura Component?