URL Parameters not being captured in state property onload

Question

I'm trying to pass certain information on click of button from one community page to another through state property of Navigation Mixin. I'm able to successfully navigate to the next page ,however when I try to access the query parameters through the state property , the state property is coming as undefined

Code on Community page which passes the information

//called on click of a button

handleButton(){

this[NavigationMixin.Navigate]({

                type: 'communitypagetwo',
                attributes: {
                    pageName: 'standard__namedPage'
                },
                state:{name:'salesforcestackexchange'}
            })
}

Code on communitypagetwo that receives data

@wire(CurrentPageReference) pageRef;

renderedCallBack(){

  console.log(this.pageRef.state.name);

}

the state object comes as undefined . However when I do a reload of page the state property is set properly and I'm able to get the value of name parameter as expected.

Any reasons why the state property is not being set initially

Answer 1

The wire handler hasn't had a chance to be called before the first render cycle completes. If you want to get the data, consider a custom handler:

@wire(CurrentPageReference) pageRef(result) {
  if(result.data) {
    console.log(result.data.state.name);
  }
  if(result.error) {
    console.error(result.error);
  }
}