如何在nextjs中通过访问从组件传递到页面的数据< LInk>

yeotifhr  于 2022-11-23  发布在  其他
关注(0)|答案(1)|浏览(162)

我有一个nextjs应用程序。我已经使用这个答案https://stackoverflow.com/a/72221419/14287707将数据从一个组件传递到一个页面,使用这样的链接。

<Link href={{
                  pathname: "/products/"+id,
                  query: userId // the data
                }}>  
                  <a>Show more</a>
                </Link>

这样,我就可以看到在接收页面上传递的额外数据作为对象,如下所示:[id].tsx

const router = useRouter();
const data  = router.query;

  console.log("USER ID IS!!!!!!", data)

但是控制台日志提供了一个空键的值,如下所示

{990:""
id: "12"}

它还像这样附加在url上

products/12?990

我怎样才能访问990?例如,我可以获得这样的ID:data.id。但是用户ID呢?

2guxujil

2guxujil1#

你当前的url是products/12?990,理想情况下应该是products/12?userId=990,原因是你传递了一个像query: userId这样的原始字符串,它被转换为query: 990
您应该根据以下文档传递对象:

query: { userId : userId }

或者简单地说:

query: { userId }

相关问题