[SalesForce] Not getting recordId in URL generated from lightning-navigation

On button click on parent LWC component, i am calling lightning-navigation to call child component. I am passing recordID in the attributes as below –

<template>
<lightning-button label="CallChild" title="CallChild" onclick={handleClick}></lightning-button>
</template>

JS –

import { NavigationMixin } from "lightning/navigation";
     connectedCallback() {
        this.redirectchildcomponent = {
          type: "standard__component",
          attributes: {
            componentName: "c__ChildComp",
            recordId: this.recordId
          }
        };
        this[NavigationMixin.GenerateUrl](this.redirectchildcomponent).then(
          url => (this.url = url)
        );
      }

    handleClick() {
    this[NavigationMixin.Navigate](this.redirectchildcomponent);
    }

After button click i am getting the following url

https://XXXXXXXX.lightning.force.com/lightning/cmp/c__ChildComp

i am not getting recordid in the URL. And how to capture recordId in the child component to pass it Apex.

Regards

Best Answer

From docs, to Add Query Parameters, you will need to utilize state attribute here.

To add query parameters to the URL, update the PageReference.state property. The navigation service uses a PageReference to generate a URL. The key-value pairs of the state property are serialized to URL query parameters.

So your page reference declaration should look like as below (you can find more on the documentation link)

this.redirectchildcomponent = {
      type: "standard__component",
      attributes: {
        componentName: "c__ChildComp",
      },
      state: {
        c__recordId: this.recordId
      }
};

Note: I haven't tested this out myself, but based on the docs, this should work.