Compound Link 使用 Gatsby Link 通过 Props 的目的地

Question

我有一个名为 Plan 的组件，它正在使用 Gatsby Link 组件。它看起来像这样：

const Plan = props => (
  ...
  <Button>
    <Link to={props.goTo}>Learn More</Link>
  </Button>
  ...
)

这允许我按如下方式使用组件：<Plan goTo='events' />，这将创建以下内容 URL：www.sitename.com/events.

然而，我真正想要的是每个 URL 包含 advertise 目录，如下所示：www.sitename.com/advertise/events。但是，我不想在 goTo 属性中包含 advertise。

为了得到这个结果，我尝试了以下方法：

const Plan = props => (
  ...
  <Button>
    <Link to=`advertise/${props.goTo}`>Learn More</Link>
  </Button>
  ...
)

但这不起作用。

所以我想知道我怎样才能做到这一点。

有什么想法吗？

更新：

明确一点——这就是我使用该组件的方式：

  <Plan goTo="events" />
  <PLan goTo="banner-ads" />

目前，这导致以下 HTML（删除了 class 个名称）：

<button><a href="/events">Learn More</a></button>
<button><a href="/banner-ads">Learn More</a></button>

我想要的是以完全相同的方式（<Plan goTo='events' />）使用组件，但HTML略有不同：

<button><a href="/advertise/events">Learn More</a></button>
<button><a href="/advertise/banner-ads">Learn More</a></button>

[注意在href属性开头添加/advertise]

Answer 1

用大括号括起反引号：

<Link to={/`advertise/${props.goTo}`}>Learn More</Link>

大括号告诉 JSX 它需要将内容解释为 JavaScript。

如果您要将 /advertise 添加到每个路径，请考虑将其添加到您的 Gatsby path prefix。

Compound Link Destination Using Gatsby Link Via Props