lightning:navigation not passing the States in URL

Question

I used to naviagate from one component to another component. 'TestComp' is the destination component to which i want to naviagate. Its working fine in dev orgs but not in all the sand boxes. In some of the sand boxes Its naviagating to 'TestComp' but its not passing the 'ID' and 'Name' parameters in URL. Is there any org settings which restrict URL? or its because of other problem.

Hoping for the help.

This is the code snippet.

   component.find("nav").navigate({
        type: "standard__component",
        attributes: {
            componentName: "c:TestComp"
        },
        state: {
            ID : data.Id,
            Name:data.Name
        }
    });

Answer 1

This feature is getting auto activated in Summer 19 release and could be the reason:

Add a Namespace Prefix to pageReference.state Properties and Query Parameters

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.

Where: This change applies to Lightning Experience and the Salesforce app in all editions. This change does not affect Visualforce or Salesforce Classic URLs, Communities, or report URL that contain non-custom query parameters. Note

Note: If your org displays an auto-activation date of January 10, 2019, ignore it. This date was the original activation date for the critical update before it was postponed. When your org updates to the Spring ’19 release, the displayed auto-activation date will be correct.

How: To add a namespace prefix for a managed package, see Register a Namespace Prefix. If you don’t have a registered namespace, add the default namespace of c__. To test and ensure that your namespace prefixes work, enable this critical update. Test any pages that have custom query parameters and that navigate to a URL containing /lightning/. If you have managed packages, test pages from within and outside of managed packages. If you run into issues, ensure that you've prefixed the values with a namespace. If you continue to have issues, contact Salesforce Customer Support.

After you add namespace prefixes, enable the critical update. From Setup, enter Critical Updates in the Quick Find box. Then select Critical Updates. For Add a Namespace Prefix to Query Parameters and pageReference.state Properties, click Acknowledge.

Answer 2

Like others have suggested, I would try and add the namespace to the component and the state params - and remember, the receiving parameters will need to use the namespace as well

component.find("nav").navigate({
        type: "standard__component",
        attributes: {
            componentName: "c__TestComp"
        },
        state: {
            c__ID : data.Id,
            c__Name:data.Name
        }
    });

Receiver:

({
    init: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var myId = myPageRef.state.c__ID;
        var myName = myPageRef.state.c__Name;

    }
})

Reference: https://developer.salesforce.com/docs/component-library/bundle/lightning:isUrlAddressable/documentation

Answer 3

Is it possible that you're developing lightning components for a community? The SFDC documentation states that "Lightning Communities don’t support the state property."

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_navigation.htm

Also, I believe the componentName should be "c__TestComp".

Answer 4

Interestingly, like Maya Tran wrote, I had read that "state" did not work in Community, but hey, I tried... and it works fine:

component.find("navigationService").navigate({
  type: "comm__namedPage",
  attributes: {
    pageName: 'category'
  },
  state: {
    categoryName: component.get("v.Name"),
    categoryLabel: component.get("v.Label")
  }
});

Answer 5

I had to do a bit more checking to get the recordId:

({
doInit : function(component, event, helper) {
    
    
    var pageReference = component.get("v.pageReference");
    console.log('pagereference = '+pageReference);
    
    if (pageReference){
        console.log('pageReference exists');
        console.log('pagereference.state = '+pageReference.state);
        if (pageReference.state.c__recordId){
            var coId = pageReference.state.c__ID;
            console.log('Id in doInit ='+coId);
            //component.set("v.accntId", coId);
        }//if recordId
        
    }//pageReference

}//doInit

})