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

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


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>