通过道具使用Gatsby链接的复合链接目标

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。但是，我不想在advertise道具中加入goTo。

要获得此结果，我尝试了以下操作：

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

但这不起作用。

所以我想知道如何才能做到这一点。

有什么想法吗？

更新：

请清楚-这就是我使用组件的方式：

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

当前，这将导致以下HTML（去除了类名）：

<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>

[请注意，在/advertise属性的开头添加了href]

Answer 1

将反引号括在括号中

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

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

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