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中添加外部链接，那么我们添加＆＃39; http：//＆＃39; （或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>

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

我尝试在Link道具中使用Button.component-但导致Button组件变为全角，并尝试使用width: auto;对其进行样式设置。

总之，长话短说，我能够使它与以下功能和样式一起工作：


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

Answer 4

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

Answer 5

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

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

5 个答案: