通过道具使用Gatsby链接复合链路目的地
通过道具使用Gatsby链接复合链路目的地
提问于 2019-07-18 14:09:59
我有一个名为Plan的组件，它使用Gatsby组件。看起来是这样的：
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
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-18 15:46:25
用背带把你的后背包起来：
<Link to={/`advertise/${props.goTo}`}>Learn More</Link>大括号告诉JSX，它需要将内容解释为JavaScript。
如果要将/advertise添加到每个路径，请考虑将其添加到盖茨比路径前缀中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57096524
复制相关文章
相似问题
腾讯云开发者
