0

I'm currently making a profile page wherein the route /profile/displaynamehere will display a page where one of its components is a basic information page that shows the display name of the user.

The component is called BasicInfo and accepts props called displayName. Here's how it looks like:

export default function Profile() {
  const router = useRouter();
  const displayNameQuery = router.query.displayName;

  return (
     ...
     <BasicInfo displayName={displayNameQuery} />
     ...
  )
}

The problem is, displayName or {displayNameQuery} in this context is undefined whenever I try to console.log it. Is there a way wherein I can pass the query parameter as props to my component?

Improve this question
5
  • can you please share the code where you are setting displayNameQuery route? are you doing that using router.push()? Commented Mar 11, 2022 at 8:06
  • displayName should match the file name as well. Since it is a dynamic parameter, your folder structure should be pages/profile/[displayName].js. Can you confirm if thats the case? Commented Mar 11, 2022 at 8:15
  • @AnkitSaxena No, Im not using router.push. I'm merely using useRouter from next/router. Commented Mar 11, 2022 at 8:46
  • @PsyGik Yes, that is how my page is structured Commented Mar 11, 2022 at 8:47
  • Does this answer your question: Next.js router is returning query parameters as undefined on first render?? Commented Mar 12, 2022 at 13:08
Related questions
5
Next JS Custom Server app.render do not pass query to a component
8
How to set nextjs router query parameter
61
NextJS - Appending a query param to a dynamic route
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.