Get current page parameters in LWC

Hello friends, Today I am going to show you the Get current page parameters in LWC component using CurrentPageReference. By CurrentPageReference we can get page important parameters like the recordId, URL parameters, etc. Get a reference to the current page in Salesforce.

Also check this : Dynamic SOQL query to fetch all fields of Sobject

Highlights Points :

1. The key-value pairs of the PageReference state property are serialized to URL query parameters.
2. CurrentPageReference have 3 types of parameters attributes, state, type
3. Get recordId to assign to LWC methods for other business logics.

Supported Pages :

• App – standard__app
• Lightning Component – standard__component
• Knowledge Article – standard__knowledgeArticlePage
• Login Page – comm__loginPage
• Named Page (Communities) – comm__namedPage
• Named Page (Standard) – standard__namedPage
• Navigation Item Page – standard__navItemPage
• Object Page – standard__objectPage
• Record Page – standard__recordPage
• Record Relationship Page – standard__recordRelationshipPage
• Web Page – standard__webPage

CurrentPageReference have 3 types of parameters

1. attributes : Have Page mode and record Id
2. state : Have all paramters which is in URL
3. type : Page Type , see Supported Pages

Console Debug :

{
    "type": "standard__recordPage",
    "attributes": {
        "recordId": "01t530000004iXsAAI",
        "actionName": "view"
    },
    "state": {
        "recordName": "test"
    }
}

Code :

AccountDetailPageLWC.JS :

import { LightningElement, api, wire } from 'lwc';
import fetchAccountDetails from '@salesforce/apex/AcountDetailLWCCtrl.fetchAccountDetails';
import { CurrentPageReference } from 'lightning/navigation';

export default class AccountDetailPageLWC extends LightningElement {
    data;
    error;
    @api recordId;
    currentPageReference = null; 
    urlStateParameters = null;
 
    @wire(CurrentPageReference)
    getPageReferenceParameters(currentPageReference) {
       if (currentPageReference) {
          console.log(currentPageReference);
          this.recordId = currentPageReference.attributes.recordId || null;
          let attributes = currentPageReference.attributes;
          let states = currentPageReference.state;
          let type = currentPageReference.type;
       }
    }
}

Output :

Reference :

1. Salesforce