如何在 nextjs 的 Router.push() 中将 object 作为参数传递并在其他组件中访问该 object

Question

Router.push({pathname: '/card', query:{data: ObjectData}})

我得到查询，因为空值无法将 object 传递给它

Answer 1

你可以像这种情况下传递你的参数：

router.push({
      pathname: '/card',
      query: { data: JSON.stringify(ObjectData)}
  })

你可以像这样在卡片组件中获取参数：

JSON.parse(props.router.query.data);

Answer 2

Ciao，在 next.js 中，您可以像这样传递查询参数：

Router.push({
  pathname: '/card',
  query: { name: 'Someone' }
})

你用这种方式检索它：

this.props.router.query.name

假设您的ObjectData是 JSON object，您可以像这样传递它：

Router.push({pathname: '/card', query: ObjectData})

Answer 3

这对我不起作用。 它说无法读取未定义的属性query

我有一个userData的 object 我想从导航组件传递到userprofilePage 。

所以，在导航中我写道：

onClick={() => {
  Router.push({
    pathname: "/userProfilePage",
    query: { data: JSON.stringify(userData) },
  });
}}

并在userProfilePage中检索：

const router = useRouter();
const userData = JSON.parse(props.router.query.data);

Answer 4

这就是你如何在 nextjs 中传递 object 作为参数

  router.push({
  pathname: "/biodata",
  query: { data: "test" },
  });

如果它是一个变量，例如 id=12346

 router.push({
  pathname: "/biodata",
  query: { data: id },
  });

并且您使用这些代码行访问其他组件中的 object

const router = useRouter();
const {
query: { data },
} = router;

即如何在新页面中使用它。关于页面

import { useRouter } from "next/router"
export default function AboutPage() {
const router = useRouter()
const {
query: { data },
} = router
return <div>About us: {data}</div>
}