在动态 URL 中传递查询参数以在另一个页面上使用

Question

我想在导航到另一个页面时传递一个额外的参数。我在下面尝试 ?extraParam=[data.buildingName] 但没有用。

 <Link href="/accounts/[accountId]/buildings/[buildingId]/gateways/[gatewayId]?extraParam=[data.buildingName]" as={`/accounts/${accountId}/buildings/${buildingId}/gateways/${row._id}`}>
            <Button type='button' color="info">Details</Button>
          </Link>

如果我使用 ?extraParam=123" 那么它工作正常。

目前，当 console.log(props) 在目标页面上时，它在查询参数中显示如下。注意 extraParam 的值，它应该作为 BuldingName.

我想我需要知道如何从 data.buildingName 访问值以添加到查询字符串。

Answer 1

考虑通过 the Next.js URL object 传递查询参数。

示例：

...
<Link
  href={{ pathname: '/path/to/page/file', query: { param1: 'value1' }, }}
  as="/rewrited-url"
>
    ...
</Link>
...

在动态 URL 中传递查询参数以在另一个页面上使用

Passing query parameters in dynamic URL to be used on another page

reactjs

react-router

next.js