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

Question

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

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

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

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

Solution 4

You should use target, component, and href props

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

View more solutions