Nextjs 路径名中的查询参数正在被解码答案

【问题标题】：Query params in Nextjs pathname are being decodedNextjs 路径名中的查询参数正在被解码
【发布时间】：2021-03-06 06:42:22
【问题描述】：

我们正在从一个 API 中提取一些数据，在该 API 中，我们使用 url 在应用程序中导航。在我们的链接组件中，我们将 url 传递为<Link href={{ pathname: url , someOtherProperty }} />，其中 url 看起来像 /path-to-page?query=value，但是当我查看客户端时，我看到 url 以 /path-to-page%3Fquery=value 的形式返回。当我们没有像<Link href={url} /> 那样将对象传递给href 时，url 很好。 decodeURIComponent 在将 url 传递给 pathname 时也不起作用，因为它在呈现给客户端之前在技术上是正确的。

有什么想法吗？

【问题讨论】：

我确实面临同样的问题，当我的 href 查询对象包含特殊字符值（例如 @ 等）时，nextjs 链接会在客户端生成损坏的 url

标签： typescript next.js

【解决方案1】：

在Link 的href 属性中使用URL 对象时，您传递给pathname 的值将被百分比编码。如果您需要传递查询参数，您可以简单地使用 query 属性。

<Link href={{
    pathname: '/path-to-page',
    query: { query: 'value' }
}}>

【讨论】：