Read URL parameters in LWC salesforce

Question

I am using lightning navigation to pass recordId from the parent component to the child component.

On button click, I am navigating to child component like below URL -

https://XXXXXXXXXX.lightning.force.com/lightning/cmp/c__ChildComp?c__recordId=t2B9E000123JvDJUA0

I need to get the recordId from the URL in the child component and pass it to apex methods.

I tried the below, but did not get the recordId.

  import { LightningElement, api, track, wire } from "lwc";
    import { getRecord, generateRecordInputForUpdate } from "lightning/uiRecordApi";
    import { CurrentPageReference } from "lightning/navigation";
    
    export default class TestLWC extends LightningElement {
     @track getrecordId;
      @wire(CurrentPageReference)
      currentPageReference;
     setCurrentPageReference(currentPageReference) {
    this.currentPageReference = currentPageReference;
  }
      getrecordId =
        this.currentPageReference && this.currentPageReference.state.c__recordId
    
    @wire(getData, { getrecordId: "$getrecordId" })
    
    }

Answer 1

You can get recordId based on below code using CurrentPageReference object. This will return record id from parent object.

You can get recordId based on below code.  

import { CurrentPageReference } from 'lightning/navigation';
import { LightningElement ,wire,track} from 'lwc';
export default class TestLWC {

    @track recordId='';
     @wire(CurrentPageReference)
    currentPageReference; 

    get recordIdFromState(){
        return this.currentPageReference &&
            this.currentPageReference.state.c__recordId; 
    }
    renderedCallback()
    {
      if(this.recordId==='')
      {
          this.recordId=this.recordIdFromState;
          console.log(this.recordId);
          //call apex after this.recordId has value
      }
    }
}

Answer 2

The best way to get parameters from URL is use CurrentPageReference.

currentPageReference.state allows you to get params.

Example:

    import { LightningElement, wire } from 'lwc';
    import { CurrentPageReference } from 'lightning/navigation';
    
    export default class Test extends LightningElement {
    
        recordId = null;

        @wire(CurrentPageReference)
        getStateParameters(currentPageReference) {
           if (currentPageReference) {
              this.urlStateParameters = currentPageReference?.state?.c__recordId;
           }
        }
    }

More details you can find here https://beyondthecloud.dev/blog/get-url-parameters-in-lwc