CurrentPageReference State is always coming as null

Question

I am trying to fetch the parameter from url in lwc. LWC is embedded in community page. Here is the code:

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

export default class EventRegistrationNew extends NavigationMixin(LightningElement) {
    eventId; //this will hold the eventid captured from pagereference
    currentPageReference;

    @wire(CurrentPageReference) 
    getStateParameters(currentPageReference) {
        console.log('inside getStateParameters');
        console.log('New currentPageReference' + JSON.stringify(currentPageReference));
        if(currentPageReference) {
            console.log('new currentPageReference' + JSON.stringify(currentPageReference));
            const fetchedEventId = currentPageReference.state?.eventid;
            console.log('New fetchedEventId' + fetchedEventId);
            if (fetchedEventId) {
                this.eventId = `URL Value was: ${fetchedEventId}`;
            } else {
                this.eventId = `URL Value was not set`;
            }
            console.log('this.eventId: '+ this.eventId);
        }
    } 
}

The state is always coming as null even though I am passing parameters in the url. URL: https://--.sandbox.my.site.com/****/registration?eventid=abcd But the console is showing New currentPageReference{"type":"standard__namedPage","attributes":{"pageName":"home"},"state":{}}

Any idea what I am doing wrong?

Answer 1

All state properties must have a namespace prefix, as per the documentation:

state properties must use a namespace prefix followed by two underscores, __. If the component isn’t part of a managed package, use c for the namespace prefix. If the component is part of a managed package, use the package's namespace.

So instead of having a property called "eventid", you need one called "c__eventid" (on the assumption this property isn't part of a package).