In an Aura component embedded on an Account record page, I have a button which navigates to a Lightning Component Tab using the following code:
const navService = component.find('navService');
const pageReference = {
type: 'standard__navItemPage',
attributes: {
apiName: 'MyLWC',
},
state: {
c__recordId: recordId,
},
};
navService.navigate(pageReference);
In my LWC referenced by my Lightning Component Tab, I have the hack needed to capture the current page reference:
currentPageReference;
@wire(CurrentPageReference)
setCurrentPageReference(currentPageReference) {
this.currentPageReference = currentPageReference;
this.checkForStuffToBeLoaded();
}
The first time I click my button and I open the Lightning Component Tab, the page reference is set correctly to be my new tab with the correct URL and apiName and the c__recordId
set properly. In my LWC, I can do this:
checkForStuffToBeLoaded = async () => {
...
console.log(this.currentPageReference.attributes.apiName);
}
The first time the component opens and this code runs, it logs "MyLWC" as expected.
Then if I close the Lightning Component Tab, and click on the button on the same Account page again, the second time the new tab opens, the page reference is the originating account page, not the new tab.
This also happens any subsequent time I click the button, including on different Account pages! As in, the above code logs undefined
as there is no apiName
, and instead currentPageReference.attributes.objectApiName
is set to Account
, even though I'm on the Lightning Component Tab LWC.
Fixes I've Tried
I've tried adding @track
over currentPageReference
in the LWC and it had no effect
I've also tried forcing different state on every Lightning Component Tab load, as in:
const pageReference = {
type: 'standard__navItemPage',
attributes: {
apiName: 'MyLWC',
},
state: {
c__recordId: recordId,
c__random: Math.random()
},
};
The behavior still persists with the wrong page reference loaded in the LWC even though the URL is correct
Edit 2: This also appears to be an issue with navigating to an Aura Component with the LWC embedded. As in, if I create an Aura Component and then navigate to it this way:
const pageReference = {
type: 'standard__component',
attributes: {
componentName: 'c__MyLwcWrapperAuraComponent',
},
state: {
c__recordId: recordId,
},
};
And in my Aura Component I have:
<aura:component implements="lightning:isUrlAddressable" extensible="true">
<c:myLwc></c:myLwc>
</aura:component>
Then the CurrentPageRef is still wrong on the second tab load.