Lightning Web Components – Fixing CurrentPageReference Pointing to Wrong Reference on Second Open

auralightning-web-components

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.

Best Answer

I have no idea why the CurrentPageReference gets set to the wrong tab on the second open of the LWC.

My current workaround is creating a wrapping Aura Component that passes its own pageReference to the LWC, as in:

<aura:component implements="lightning:isUrlAddressable" extensible="true">
  <c:myLwc pageReference="{!v.pageReference}"></c:placemat>
</aura:component>

Related Topic