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

As the question in the title state.

Playing with react, react-router and material-ui and in one place I want to make an action button in a Card component link to an external url, like without success.

I'm currently thinking of adding an event handler to use window.open, but it must be a smarter way?

I did find a solution, before the code looked like this.

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

The solution was very simple:

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

Solution 1:^[1]

If we are adding external link in react-router Link or material-ui Button then This is important we add 'http://' (or https://) in external url. link will not work without add http.

WRONG CODE -

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

then redirect link will

localhost:3000/www.google.com

RIGHT CODE -

If we want to redirect with react-router Link then this is example code -

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

If we want to redirect with material-ui Button then this is example code -

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

Note: I added target="_blank" in Link/Button. This is optional (and If I will add any external link in my website then I will want to open that link in another Browser Tab not in same Tab.)

Solution 2:^[2]

You can wrap <RaisedButton /> into <Link /> component for internal routing.

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

And wrap into simple <a> tag for external:

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

Solution 3:^[3]

You should use target, component, and href props

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

Solution 4:^[4]

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

Solution 5:^[5]

I tried using a Link in the Button.component prop - but it lead to the Button component to be full-width and trying to style it with width: auto; did nothing.

Anyway, long story short I was able to get this to work functionally and stylistically with:


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

Solution 6:^[6]

This still was buggy for me. The fix was to use <a> instead of react-router-dom's <Link>.

Solution 7:^[7]

You can simply pass the href prop to the Button component. With that, Button will automatically work as a Link. You're also allowed to pass, for instance, the target prop if you want to open the link in a separate tab.

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

The code above, then, should output something like:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Roy Rico
Solution 3	Shishir Arora
Solution 4	baggy
Solution 5	Dylan Pierce
Solution 6	Aniket Suryavanshi
Solution 7	Flavio Wuensche

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]