How to get query parameters or URL parameters using LWC in Salefsorce?

How to get query parameters or URL parameters using LWC in Salefsorce?

Sample Code:

import { LightningElement, wire } from ‘lwc’;
import { CurrentPageReference } from ‘lightning/navigation’;

export default class Sample extends LightningElement {

    @wire(CurrentPageReference)
    currentPageReference;

    connectedCallback() {
       
        console.log( ‘Param ‘ + this.currentPageReference.state.recId );
   
    }

}


Output:

Community:

Sample Code:
 
HTML:
<template>
    recId is {recId}
</template>

 
JavaScript:
import { LightningElement, wire } from ‘lwc’;
import { CurrentPageReference } from ‘lightning/navigation’;

export default class Sample extends LightningElement {

    recId;

    @wire(CurrentPageReference)
    currentPageReference;

    connectedCallback() {
       
        if ( this.currentPageReference.state.c__recId ) {

            console.log( ‘recId Param value is ‘ + this.currentPageReference.state.c__recId );
            this.recId = this.currentPageReference.state.c__recId;

        }

        if ( this.currentPageReference.state.c__testParam ) {

            console.log( ‘Param ‘ + this.currentPageReference.state.c__testParam );

        }
   
    }

}

 
meta.xml:
<?xml version=”1.0″ encoding=”UTF-8″?>
<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata”>
    <apiVersion>49.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>


Output:


Leave a Reply