Actualmente estoy creando una página de perfil en la que la ruta /profile/displaynamehere para mostrar aquí mostrará una página donde uno de sus componentes es una página de información básica que muestra el nombre para mostrar del usuario.

El componente se llama BasicInfo y acepta accesorios llamados displayName . Así es como se ve:

 export default function Profile() { const router = useRouter(); const displayNameQuery = router.query.displayName; return ( ... <BasicInfo displayName={displayNameQuery} /> ... ) }

El problema es que displayName o {displayNameQuery} en este contexto no está definido cada vez que intento consolarlo. ¿Hay alguna manera en la que pueda pasar el parámetro de consulta como accesorios a mi componente?