lightning:isUrlAddressable pageReference returns null

Question

I'm trying to use the new lightning:isUrlAddressable interface to pass a few variables into a lightning component that is inside a lightning tab. In the init function I try to get the pageRefernce with the code

var myPageRef = component.get("v.pageReference");
console.log(myPageRef);

myPageRef will only return null right now and I'm not sure why. I have made sure the api version is 43. I am loading some other scripts into the page as well and I have tried getting the pageReference before and after loading the scripts. with no change.

<ltng:require styles="{!join(',', 
                            $Resource.FSL__FontAwesome44 + '/css/font-awesome.min.css')}"
              scripts="{!join(',', 
                            $Resource.jquery_3_1_0_min, 
                            $Resource.bootstrapNew + '/bootstrap-3.3.7-dist/js/moment.js',
                            $Resource.bootstrapNew + '/bootstrap-3.3.7-dist/js/bootstrap.datepicker.js')}"
              afterScriptsLoaded="{!c.jsLoaded}" />

I have also tried including

<lightning:workspaceAPI aura:id="workspace"/>
<lightning:navigation aura:id="navService"/>

but neither seems to have any effect and I don't think they should from what I know about them.

Has anyone else had any problems with this interface?

Answer 1

I had a similar issue, it constantly returns null if the component is being used on a flexipage (this isn't supported, see documentation https://developer.salesforce.com/docs/component-library/bundle/lightning:hasPageReference/documentation).

Answer 2

I've found some issues with caching of the PageReference object that have been solved by using a handler - they might help you too.

I would run the init routine first on script load, with a check for the validity of the PageReference object. ie:

var pageReference = component.get('v.pageReference');
console.log(JSON.stringify(pageReference));
if ($A.util.isEmpty(pageReference) || $A.util.isEmpty(pageReference.state) || $A.util.isEmpty(pageReference.state.id)) {
  return;
}
var recordId = pageReference.state.id;

The init routine will abort if the PageReference is null or has no params.

Then, use a handler to listen for changes to the pageReference attribute. It seems that it gets refreshed AFTER the initial load of the component, which could be causing all your problems:

<aura:handler name="change" value="{!v.pageReference}" action="{!c.init}" />

You may want to pull the parsing of the url params into a separate routine or use a flag to indicate that the component has loaded if you want to avoid running the init routine twice.