In Next.js how can I pass data to a dynamic route if 'route.query' is not an available option?

Question

I'm working on an embedded app, the main URL doesn't change when I go to my dynamic url page, and router.query keeps returning undefined. When I go to my dynamic route I see my 'hello' so I know it's working, but other than that I'm stumped on how to proceed. My best guess at the moment is to use a span tag instead of a Link tag with an onClick function that not only redirects to the dynamic route, but also sends the path of the dynamic route to a context API so I can retrieve it inside the dynamic route.

Here is my Link code:

        href={{
          pathname: `/customer/[query]`,
          query: { query: `${item.ownerEmail}` },
        }}
      >

And this is the code in the dynamic page: 

import { useRouter } from "next/router";

function Customer(props) {
  const router = useRouter;
  console.log(router.query);
  return <div>Hello</div>;
}

question from:https://stackoverflow.com/questions/65847700/in-next-js-how-can-i-pass-data-to-a-dynamic-route-if-route-query-is-not-an-ava

Answer 1

You need to initialize the hook. Should look like this

 const router = useRouter();

Let me know if that solved the problem