pass props to page using next page and next router?-CodePudding

I am pushing a screen based on some data:

 if (waitData) {
    //@ts-ignore
    if (waitData?.events[0].args.message == "Loss") {
      router.push("/losescreen");
    }
    //@ts-ignore
    if (waitData?.events[0].args.message == "Win") {
      router.push("/winscreen");
    }
  }

This works fine, now I want to pass a prop to LoseScreen. This is LoseScreen:

const Loss: NextPage = () => {

return (...)

}

export default Loss

How can i do so? I am using React, Typescript, Next.js, and Next Router

CodePudding user response：

You might want to use query string to pass something in the URL. And then access it in your Loss component:

 if (waitData) {
    //@ts-ignore
    if (waitData?.events[0].args.message == "Loss") {
      router.push({pathname: "/losescreen", query: {somekey: "someValue" });
    }
  }

Then in your Loss component:

const Loss: NextPage = () => {
  const router = useRouter()
  const { somekey } = router.query

  console.log(somekey) // "someValue"

  return (...)

  }

export default Loss