如何从 getServerSideProps 中的 next.js 链接访问参数和查询字符串？答案

【问题标题】：How to access both the params and query string from a next.js Link in getServerSideProps?如何从 getServerSideProps 中的 next.js 链接访问参数和查询字符串？
【发布时间】：2021-12-15 00:01:15
【问题描述】：

我有一个组件链接到我正在使用 getServerSideProps 的 NextJS 页面，并且需要访问参数和查询字符串。

我真的很想有一个“干净”的网址，例如“domain.com/usersname/likes”，最后没有“?userId=h337dhdh37dhdhd”。可以这样吗？

<Link href={`/${user?.username}/likes?userId=${id}`} as={`/${user?.username}/likes`}>
    ...
</Link>

在我的 getServerSideProps 中，我根据 Next 文档使用上下文：

export async function getServerSideProps(context) {
    const username = context.params.username;
    const userId = context.query.userId;
    ...
}

参数（用户名）很好，但无论我做什么，userId 始终是未定义的。谁能看看我做错了什么？

编辑：codesandbox 链接：https://codesandbox.io/s/nifty-bush-livm7 - 基于 Restricted Beam 下面的回答

非常感谢任何帮助，马特

【问题讨论】：

我无法重现该问题。您确定将 id 变量传递给 /${user?.username}/likes?userId=${id} 时设置了吗？
嗨 Julio，是的，作为测试，我设置了一个 const id = 'sampleId';但是当我记录它时它仍然出现未定义
这很奇怪。您能否提供一个可以重现问题的代码框（或类似内容）？
当然，我刚刚编辑了问题以添加链接
那个codeandbox链接似乎对我不起作用。

标签： reactjs next.js

【解决方案1】：

如果您的目标是获得一个没有 '?query=something' 的干净 URL，您应该尝试 nextjs 的 slug 和 dynamic routes 功能。使用此功能：

您需要将文件名更改为 [...slug].js 和所有链接中的不同参数可以被捕获在一个数组中。

因此对于“domain/usersname/likes/userId”，您的 [...slug].js 文件将位于根目录中，要访问其值，您将使用如下上下文：

export async function getServerSideProps(context) {
    const username = context.params.slug[0];
    const userId = context.params.slug[2];
    ...
}

因此，如果您的用户访问该链接： domain/user-XYZ/likes/12345abc，slug 数组会是这样的：

context.params.slug:["user-XYZ","likes","12345abc"]

文档：https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes

【讨论】：

谢谢，这很有意义，而且几乎可以工作。我已经改进了到 /${user?.username}/userId=${myId}} as={/${user?.username}/likes}> 的链接，并使用了 context.params.slug[0] 和 context.params.slug[1]。然而，它似乎使用链接的“as”部分作为参数，因为当我记录 params.slug[1] 时，它给了我“喜欢”——我知道链接的“as”部分是对可见的 url用户，而 href 用于参数。我当然可以在链接的“as”部分传递参数，但这会给我一个丑陋的 url。我的链接正确吗？
刚刚添加了一个指向代码框的链接，显示正在发生的事情
不，“as”不仅仅是一个“可见的 url”。它用于动态路由。您的 href 将保持不变（文件系统路径），而您的“as”将包含动态链接。这就是我认为应该是您的链接：注意：'userId=${myId }' 将不起作用，因为它是一个查询。它必须是价值本身。此外，不，您不能摆脱路由的最后一部分，因为它会导致 URL 中的信息（myID）丢失。文档：nextjs.org/docs/tag/v9.5.2/api-reference/next/…