我尝试将我的 Material-UI RaisedButton 链接到外部网址但没有成功？

Question

作为标题状态的问题。

使用 react、react-router 和 material-ui 并在一个地方我想在 Card 组件中创建一个操作按钮链接到外部 url，就像没有成功一样。

我目前正在考虑添加一个事件处理程序来使用 window.open，但它必须是一种更聪明的方式吗？

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

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

解决方案非常简单：

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

原文由 HenrikGr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果我们在 react-router Link 或 material-ui 按钮中添加外部链接，那么在外部 url 中添加“http://”（或 https://）很重要。如果不添加 http，链接将无法使用。

错误代码 -

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

然后重定向链接将

localhost:3000/www.google.com

正确的代码 -

如果我们想使用 react-router Link 重定向，那么这是示例代码 -

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

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

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

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

原文由 Arpit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以将 <RaisedButton /> 包装成 <Link /> 内部路由组件。

 <Link to={this.props.cardItem.resourceUrl}>
  <RaisedButton label="Ok" />
</Link>

并包装成简单的 <a> 外部标签：

 <a href={this.props.cardItem.resourceUrl}>
  <RaisedButton label="Ok" />
</a>

原文由 Alexandr Lazarev 发布，翻译遵循 CC BY-SA 4.0 许可协议