使用下一页和下一个路由器将道具传递给页面？

Question

我正在根据一些数据推屏：

 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");
    }
  }

这很好用，现在我想将一个道具传递给 LoseScreen。这是 LoseScreen：

const Loss: NextPage = () => {

return (...)

}

export default Loss

我该怎么做？我正在使用 React、Typescript、Next.js 和 Next Router

Answer 1

您可能想使用查询字符串在 URL 中传递一些内容。然后在你的损失组件中访问它：

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

然后在你的损失部分：

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

  console.log(somekey) // "someValue"

  return (...)

  }

export default Loss

使用下一页和下一个路由器将道具传递给页面？

pass props to page using next page and next router?

reactjs

next.js