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

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

的对象，我想将其从导航组件传递到

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;

即如何在新页面.about页面中使用它

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

Answer 5

Nuxt 3

从Page1发送参数

const router = useRouter();

const navigateToPage = () => {
    const body = {
        username:"hello"
    }
    router.push({ path: "/page2", query:body }); //send param throught query
}

在第2页接收参数

const route = useRoute();

const getParam= () => {
  console.log("Params: ", route?.query)
  console.log("Params:",route?.query?.username) // In our case
}