Undefined TypeError: path.startsWith is not a function

Question

I have this code in next.js where from a component I send this:

<button
className="bg-blue-500 hover:bg-violet-500 text-white font-bold py-2 px-4 rounded mx-auto mt-auto"
onClick={() => router.push({
pathname: /publicacion/perfilPublicacion,
query: publicacion
})}

Me interesa
</button>  

and I receive it this way:

import PerfilPublicacion from "@/app/components/Publicacion/PerfilPublicacion";
import { useRouter } from "next/navigation";

export default function PerfilPublicacionPage() {
const router = useRouter();
const {publicacion} = router.query;
return <PerfilPublicacion publicacion={publicacion} />;  

}

I get this error: TypeError: path.startsWith is not a function

any solution?

I was expecting to receive the object that I send you which is the publication but I get this error, I don't know why.

any solution?

Answer 1

You should use a string for the pathname property as follow:

pathname: "/publicacion/perfilPublicacion"

Full corrected code:

import { useRouter } from "next/router"; // Use "next/router" instead of "next/navigation"
    
    // ...
    
    <button
      className="bg-blue-500 hover:bg-violet-500 text-white font-bold py-2 px-4 rounded mx-auto mt-auto"
      onClick={() =>
        router.push({
          pathname: "/publicacion/perfilPublicacion", // Use a string, not a regular expression
          query: publicacion,
        })
      }
    >
      Me interesa
    </button>