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

15 thoughts on “Navigation in Lightning Component : lightning:navigation

    1. 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

  1. 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.

      1. 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. )

  2. 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.

    1. 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

  3. 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]

  4. 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) {
    }

  5. 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

Leave a Reply

Your email address will not be published. Required fields are marked *