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

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

 

Controller.js Code

({
    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);
    }
})

 

 

Happy learning and Keep sharing 🙂

Resource: –

Salesforce Document

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

Leave a Reply

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