score:64

Accepted answer

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.)

score:0

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>

score:0

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

score:0

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:

enter image description here

score:4

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

score:5

You should use target, component, and href props

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

score:17

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>

Related Query

More Query from same tag