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

【问题标题】：I try to make my Material-UI RaisedButton link to an external url without success?我尝试将我的 Material-UI RaisedButton 链接到外部网址但没有成功？
【发布时间】：2016-11-29 03:47:37
【问题描述】：

作为标题状态的问题。

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

【问题讨论】：

在帖子中最好粘贴代码，而不是图片。
只是检查所有的基础，你确定你传递给 href 的值不为 null 并且包含正确的字符串吗？
感谢您的时间和 cmets。我确实解决了它，我将尝试发布粘贴代码的解决方案。 :-)
如果您有解决方案，您可以回答自己的问题。没关系。
出于好奇，您是如何发布代码图像的？似乎至少需要在“后端”和“前端”上进行一些额外的步骤。 Ctrl+c ctrl+v 带一些标签，vs 截屏，保存图片，裁剪，上传，插入...

标签： reactjs react-router material-ui

【解决方案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"。这是可选的（如果我将在我的网站中添加任何外部链接，那么我将希望在另一个浏览器选项卡中打开该链接，而不是在同一选项卡中。）

【讨论】：

别忘了你不必使用“_blank”。您可以使用名称来防止每次用户单击时打开新选项卡/窗口，这可能非常烦人。 IE。 target="mynewtab"
如果我想使用 to="mailto:test@test.com" 有什么解决办法？

【解决方案2】：

您可以将<RaisedButton /> 包装到<Link /> 组件中以进行内部路由。

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

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

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

【讨论】：

我可以在
<Link> 组件用于反应路由。外部链接与它无关。对于外部链接，请免费填写<a>。

【解决方案3】：

<Button component={Link} to={path} >
   LINK BUTTON
</Button>

【讨论】：

如果你能把代码解释给以后的读者看就好了。
对我来说，它进行了更改，我使用了“href”而不是“to”：

【解决方案4】：

你应该使用目标、组件和 href 属性

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

【讨论】：

【解决方案5】：

我尝试在 Button.component 属性中使用 Link - 但它导致 Button 组件是全角的，并且尝试使用 width: auto; 对其进行样式设置什么也没做。

总之，长话短说，我能够让它在功能和风格上都能正常工作：


      <Link href="/somewhere/over/the/rainbow" target="_blank">
        <Button size="medium" variant="contained" color="primary">
          View RV
        </Button>
      </Link>

【讨论】：

【解决方案6】：

这对我来说仍然是错误的。解决方法是使用 <a> 而不是 react-router-dom 的 <Link>。

【讨论】：