如何在nextjs中的Router.push()中将对象作为params传递，并在其他组件中访问该对象

Question

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

我得到查询，因为空值无法将对象传递到中

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对象，你可以像一样传递它

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

Answer 3

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

我有一个对象userData，我想把它从nav组件传递给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 中将对象作为参数传递的

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

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

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

并且您使用以下代码行访问其他组件中的对象

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>
}