How to access ULR parameter (dynamic page ) in Server Component without prop drilling?

[alamenai]

Summary

I have a component tree:

const Page = ()=>{
// some code
return <>
{**some components**}
<Parent/>
</>
}

The parent component contains other components and each component has its own API request:

const Parent = ()=>{
// some code

return <>
{**some components**}
<MyComponent/>
</>

}

MyComponent is a server component that has a server action:

const MyComponent = ()=>{

// server action that belong to an id in the URL
// how to access the id directly
  async function getElectricity() {
    "use server"
    getBuildingAddressByEncryptedId()
  }
}

I know that I can access the params from the Page and pass it as prop but I want to avoid prop drilling in this case.

Additional information

No response

Example

No response

[icyJoseph]

In this case though, when the getElectricity action is submitted, could you not pass the value from a client component using useParams?

Is this getting submitted through a form component?

[alamenai]

Hi @icyJoseph ,

I resolved the issue by moving the component directly in the page and pass the id from params directly as a prop.

[icyJoseph]

That also works, hoisting the component in the tree. Did you use composition?

[alamenai]

Hi @icyJoseph , yes exactly.