Pass Parameter Using Lightning Navigation

Question

I am following this link where Source Component passes parameters to Target and the parameters are visible in URL..

I am following the exact steps but its not passing parameters to mt Target Component, neither can I see any Parameters in URL.. Is there anything I am doing wrong?

I have added the component in Account Details Page.

Source.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<lightning:navigation aura:id="navService"/>
<aura:attribute name="pageReference" type="Object"/>
<aura:attribute name="url" type="String"/>
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<lightning:button label="Open Lightning Component" onclick="{!c.handleClick}"/>

SourceController.js

({
init : function(cmp, event, helper) {
    var navService = cmp.find("navService");
    var pageReference = {

        "type": "standard__component",
        "attributes": {
            "componentName": "c__Target"    
        },    
        "state": {
            "firstName": "Test"  ,
            "lastName": "user"    
        }
    };
    cmp.set("v.pageReference", pageReference);
    var defaultUrl = "#";
    navService.generateUrl(pageReference)
    .then($A.getCallback(function(url) {
        cmp.set("v.url", url ? url : defaultUrl);
    }), $A.getCallback(function(error) {
        cmp.set("v.url", defaultUrl);
    }));
},
handleClick: function(cmp, event, helper) {
    var navService = cmp.find("navService");
    // Uses the pageReference definition in the init handler
    var pageReference = cmp.get("v.pageReference");
    event.preventDefault();
    navService.navigate(pageReference);
}

})

Target.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:isUrlAddressable" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.init}" />

<aura:attribute name="firstName" type="String" />
<aura:attribute name="lastName" type="String" />
<div>
    Full Name : {!v.firstName} + {!v.lastName}
</div>

({
init: function(cmp, event, helper) {
    var pageReference = cmp.get("v.pageReference");
    cmp.set("v.firstName", pageReference.state.firstName);
    cmp.set("v.lastName", pageReference.state.lastName);
}

})

When I click the button, URL is now showing any parameter.. Is there anything wrong?

Answer 1

From Summer'19 release, it is mandatory to prefix c__ to parameters (if without namespace) in state or else they will be ignored.

As mentioned in the Spring ’19 release notes, this critical update addresses an issue with naming conflicts between package components. A namespace prefix distinguishes your package and its contents from other developers' packages. The namespace prefix prevents conflicts between components on the state or query parameter name. Query parameters and pageReference.state properties must have a namespace prefix. If they don’t, this critical update removes them from the org's URLs. This critical update is enabled for Summer ’19 on May 17, 2019.

"state": {
        "c__firstName": "Test"  ,
        "c__lastName": "user"    
    }