我尝试将我的 Material-UI RaisedButton link 设置为外部 url 但没有成功？

Question

如题状态中的问题

玩 react、react-router 和 material-ui 并且在一个地方我想在 Card 组件 link 中制作一个动作按钮到外部 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

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

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

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

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

Answer 2

如果我们在 react-router Link 或 material-ui 按钮中添加外部 link 那么这很重要，我们添加 'http://' （或https://) 在外部 url。 link 不添加 http 将无法工作。

错误代码 -

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

然后重定向 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>

注：我在Link/Button中添加了target="_blank"。这是可选的（如果我要在我的网站中添加任何外部 link，那么我将要在不在同一选项卡中的另一个浏览器选项卡中打开该 link。）

Answer 3

我尝试在 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>

Answer 4

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

Answer 5

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

Answer 6

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

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

Answer 7

您只需将 href 属性传递给 Button 组件即可。这样，Button 将自动作为 Link 工作。例如，如果您想在单独的选项卡中打开 link，您也可以传递 target 属性。

const PremiumButton = () => (
  <Button size="large" href="https://buy.stripe.com/14kdSp4bg6Qj2v65km" variant="contained">
    Criar conta premium
  </Button>
)

上面的代码应该输出如下内容：

我尝试将我的 Material-UI RaisedButton link 设置为外部 url 但没有成功？

I try to make my Material-UI RaisedButton link to an external url without success?

reactjs

react-router

material-ui