pararell route with dynamic props.

[zenith fog]

how do i get the id of a e.g user in a pararell route?
i was trying to do something like this:

'use client'

import { ModalParallel } from '@/components/modal-parallel'
import { EditarUsuarioForm } from '@/components/usuarios/editar'

export default function Page({ params }: { params: { id: string } }) {
  const id = params.id
  return (
    <ModalParallel size="lg">
      {({ setIsOpen }) => <EditarUsuarioForm setIsOpen={setIsOpen} cancelButton id={id} />}
    </ModalParallel>
  )
}

but im getting this error:

Console Error


A param property was accessed directly with `params.id`. `params` is now a Promise and should be unwrapped with `React.use()` before accessing properties of the underlying params object. In this version of Next.js direct access to param properties is still supported to facilitate migration but in a future version you will be required to unwrap `params` with `React.use()`.

src/app/(app)/gestao/usuarios/@modal/[id]/editar/page.tsx (6:38) @ Page


  4 | import { EditarUsuarioForm } from '@/components/usuarios/editar'
  5 |
> 6 | export default function Page({ params }: { params: { id: string } }) {
    |                                      ^
  7 |   const id = params.id
  8 |   return (
  9 |     <ModalParallel size="lg">

[velvet lance]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[broken geyser]

Make use of useParams which is imported from next/navigation

[rugged wharf]

The problem is that params are now a promise, when you pass them down as props from a server component to a client component make sure you’re typing them correctly, and when accessing them make sure to unwrap the promise to get their value, this is done by awaiting params in server components or passing them to use hook in client components.

So, to solve this issue you can either use the hook useParams() or the hook use():
const {id} = useParams()
const {id} = use(params)

[edgy ingot]

export default async function YourFunction({ params }: { params: { id: string } }) {
const resolvedParams = await params;
const id = resolvedParams.id;
console.log('Room ID:', id);