Why is CurrentPageReference.state Always Empty in LWC on a Community Page?

Question

I am trying to retrieve a URL parameter in an LWC embedded in a Salesforce Community page, but CurrentPageReference.state is always coming as {}. Even though I pass eventid in the URL like this:

https://<your-community-url>/registration?eventid=abcd

the console log shows:

{"type":"standard__namedPage","attributes":{"pageName":"home"},"state":{}}

Why is the state object empty, and how can I correctly access the URL parameter?

Answer

The issue is that all state properties in CurrentPageReference require a namespace prefix. If your component is not part of a managed package, use c__ as the prefix. Update your URL and code:

Corrected URL:

https://<your-community-url>/registration?c__eventid=abcd

Corrected Code:

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

export default class EventRegistrationNew extends LightningElement {
    eventId;

    @wire(CurrentPageReference)
    getStateParameters(currentPageReference) {
        if (currentPageReference) {
            this.eventId = currentPageReference.state?.c__eventid || 'URL Value was not set';
            console.log('eventId:', this.eventId);
        }
    }
}

The component imports LightningElement from LWC, which is required for all LWC components. It also imports wire to use the @wire decorator for fetching data reactively. The CurrentPageReference module is imported from lightning/navigation to access the current page’s URL information, including query parameters. This defines the EventRegistrationNew component.The eventId variable will store the extracted parameter from the URL. The @wire decorator is used to subscribe to CurrentPageReference, which provides details about the current page, including query parameters.The method getStateParameters(currentPageReference) automatically runs whenever the page reference changes. It attempts to extract the c__eventid parameter from currentPageReference.state.The namespace prefix (c__) is required because all query parameters in Experience Cloud pages must be prefixed.If c__eventid exists, it is assigned to this.eventId. Otherwise, it defaults to 'URL Value was not set'. Logs the extracted eventId value to the browser console for debugging.
The component automatically retrieves query parameters from the URL in an Experience Cloud page.It ensures query parameters are correctly prefixed (e.g., c__eventid).The use of @wire(CurrentPageReference) makes it reactive, so if the page URL changes, the component updates dynamically.If c__eventid is missing, it assigns a default message to avoid errors.

Real-Time Project-Based Salesforce Course to Kick Start Your Career

Our Salesforce Course is designed to provide a comprehensive understanding of the Salesforce platform, equipping you with the essential skills to thrive in the CRM industry. The program covers key modules such as Salesforce Admin, Developer, and AI, combining theoretical learning with hands-on experience. Through real-world projects and practical exercises, you will gain the expertise needed to tackle complex business challenges using Salesforce solutions. Our expert trainers ensure you develop both technical proficiency and industry-relevant knowledge to excel in the Salesforce ecosystem.

Beyond technical skills, our Salesforce training in Chennai offers personalized mentorship, certification guidance, and interview preparation to enhance your career opportunities. You will have access to in-depth study materials, real-world project exposure, and dedicated support throughout your learning journey. By the end of the program, you will be fully prepared for certification exams and possess the problem-solving skills that employers seek. Take the first step toward a successful Salesforce career with us—sign up for a Free Demo today!

0
Would love your thoughts, please comment.x
()
x