Назначение составной ссылки с использованием ссылки Gatsby через реквизиты

У меня есть компонент 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]