How to get URL parameters/query parameters from Salesforce Experience Cloud/Community Cloud using Lightning Web Component?

How to get URL parameters/query parameters from Salesforce Experience Cloud/Community Cloud using Lightning Web Component?

Sample Code:

HTML:

<template>
    Record id is {recId}
</template>

JavaScript:

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

export default class CommunityQueryParam extends LightningElement {

    @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;

        }
   
    }

}

js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
    </targets>
</LightningComponentBundle>

Output:

Leave a Reply