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

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>

Answer 1

如果我们在react-router Link或material-ui Button中添加外部链接那么重要的是我们在外部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重定向,那么这是示例代码 -

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

别忘了您不必使用“ _blank”。您可以使用名称来防止用户每次单击它时都打开一个新的选项卡/窗口，这可能会很烦人。即`target =“ mynewtab”` (2认同)

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>

Answer 3

您应该使用 target、component 和 href 属性

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