[SalesForce] LWC not recognizing PageRefrence changes and not displaying updated values

I have the below parent aura component which has parent LWC –
On clicking redirect button on parent i am passing the attritubes in URL and the values are displayed on the child. This happens for first time. But when i go 2nd time and hit redirect button, i am unable to see updated values on child. it gives me previous values.

If i refresh the entire browser and then do the action, it works fine.

Parent Aura (Used as quickaction) - 
    <aura:component implements="lightning:isUrlAddressable,force:lightningQuickAction,force:hasRecordId">
           <div class="slds-card">
            <c:sidParentChild recordId="{!v.recordId}"/> 
        </div>
    </aura:component>

Parent LWC HTML –

<template>
    <lightning-layout multiple-rows="true">
        <lightning-layout-item padding="horizontal-small" size="6">
            <lightning-input type="text" value={employeename} name="Ename" label="E Name" class="ename"></lightning-input>
        </lightning-layout-item>
        <lightning-layout-item padding="horizontal-small" size="6">
            <lightning-input type="text" value={employeeadd} name="Eadd" label="E Add" class="eadd"></lightning-input>
        </lightning-layout-item>
        <lightning-layout-item padding="horizontal-small" class="slds-p-top_large" size="6">
            <lightning-button label="RedirectToChild" title="RedirectToChild" class="slds-m-left_x-small" onclick={redirecttochild}></lightning-button>
        </lightning-layout-item>
    </lightning-layout>
</template>

Parent LWC JS –

import { LightningElement, track, api, wire } from 'lwc';
import { CurrentPageReference, NavigationMixin } from "lightning/navigation";

export default class SidParentChild extends NavigationMixin(
    LightningElement
) {
    @api recordId;
    @track getempdetails = {
        employeename: "",
        employeeadd: ""
    };

    connectedCallback() {
        this.redirecttochildcomp = {
            type: "standard__component",
            attributes: {
                componentName: "c__sidchildcheck"
            },
            state: {
                c__recordId: this.recordId,
                c__getempdetails: this.getempdetails
            }
        };
        this[NavigationMixin.GenerateUrl](this.redirecttochildcomp).then(
            url => (this.url = url)
        );
    }
    redirecttochild() {
        let ename = this.template.querySelector(".ename").value;
        let eaddre = this.template.querySelector(".eadd").value;
        this.getempdetails.employeename = ename;
        this.getempdetails.employeeadd = eaddre;
        this[NavigationMixin.Navigate](this.redirecttochildcomp, false);
    }
}

Child Aura Component –

<aura:component implements="lightning:isUrlAddressable,force:lightningQuickAction,force:hasRecordId">
    <c:sidchild recordId="{!v.recordId}"/>
</aura:component>

Child LWC HTML –

<template>
    {recordid}
    {empdetails.employeename}
    {empdetails.employeeadd}
</template>

Child LWC JS

import { LightningElement, track, api, wire } from 'lwc';
import { CurrentPageReference, NavigationMixin } from "lightning/navigation";

export default class Sidchild extends NavigationMixin(
    LightningElement
) {
    @track recordId;
    @track empdetails;

    @wire(CurrentPageReference)
    currentPageReference;

    get recordIdFromState() {
        return (
            this.currentPageReference && this.currentPageReference.state.c__recordId
        );
    }

    get empdetailsFromState() {
        return (
            this.currentPageReference &&
            this.currentPageReference.state.c__getempdetails
        );
    }

    renderedCallback() {
        this.recordId = this.recordIdFromState;
        this.empdetails = this.empdetailsFromState;
        console.log(this.recordId);
    }
}- 

Best Answer

Found one solution -

In the component with lightning:isUrlAddressable simply add a change handler for the pageReference state.

Component:

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

Controller.js:

reInit : function(component, event, helper) {
        $A.get('e.force:refreshView').fire();
    }
Related Topic