Reactjs 我try 将我的 MaterialUI RaisedButton 链接到外部网址但没有成功

发布于10月24日

作为标题状态中的问题.

使用react、react router和material ui，在一个地方，我想在卡片组件中创建一个指向外部url的操作按钮，比如

我目前正在考虑添加一个事件处理程序来使用Windows.开放，但这一定是一种更聪明的方式？

在代码看起来像这样之前，我确实找到了一个解决方案.

<CardActions>
   <RaisedButton
       href={this.props.url}
       label="OK"
   />
</CardActions>

解决方案非常简单:

<CardActions>
   <a href={this.props.url} target="_blank">
     <RaisedButton
        label="OK"
     />
   </a>
</CardActions>

推荐答案

如果我们在react router link或material ui按钮中添加外部链接，那么在外部url中添加"http://"(或https://)非常重要.如果没有添加http，链接将无法工作.

错误代码-

<Link target="_blank" to='www.google.com'>Google</Link>

然后重定向链接将

localhost:3000/www.google.com

正确的代码-

如果我们想用react路由链接重定向，那么下面是示例代码-

<Link target="_blank" to='http://www.google.com'>Google</Link>

如果我们想用material ui按钮重定向，那么下面是示例代码-

<Button target="_blank" href="http://www.google.com/">Google</Button>

Note:我在链接/按钮中添加了target="_blank".这是可选的(如果我将在我的网站中添加任何外部链接，那么我将希望在另一个浏览器选项卡中打开该链接，而不是在同一个选项卡中.)

实用课程推荐