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

【问题标题】：Passing query parameters in dynamic URL to be used on another page在动态 URL 中传递查询参数以在另一个页面上使用
【发布时间】：2019-11-23 05:14:08
【问题描述】：

我想在导航到另一个页面时传递一个额外的参数。我在下面尝试使用 ?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 访问值以添加到查询字符串中。

【问题讨论】：

执行 console.log() 时 [data.buildingName] 中有什么内容？此外，为了清楚起见，您可能需要发布其余代码。
data.buildingName 是建筑物名称。我已编辑问题以在目标页面上显示 props.query 值
我需要 extraParam 中的实际值而不是 [data.buildingName]
您能在派生组件中使用console.log [data.buildingName] 名称，而不是目的地吗？
data.buildingName 为 buildingName 保存价值

标签： reactjs react-router next.js

【解决方案1】：

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

例子：

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

【讨论】：