How to link external url with button in Material UI? - reactjs

Question

I'm pretty new to Material-UI and testing my web-app with localhost. Basically, I have created a button that will route to external url (www.google.ca for now) when the user clicks on it. For unknown reason, clicking a button routes to http://localhost:3001/www.google.ca instead of https://www.google.ca. Not sure what the problem is?
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Card from '#material-ui/core/Card';
import CardActionArea from '#material-ui/core/CardActionArea';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import CardMedia from '#material-ui/core/CardMedia';
import Button from '#material-ui/core/Button';
import Typography from '#material-ui/core/Typography';
import Link from '#material-ui/core/Link';
import waterBottle from '../images/tom.jpg';
// All the code has been retrieved from https://material-ui.com/components/cards/#card
const useStyles = makeStyles({
root: {
maxWidth: 345,
},
media: {
height: 140,
},
});
export default function MembersInfo() {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image={waterBottle}
title="Image"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Tom Wong
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Tom is a business administrative student at xxx university.
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary" href="www.google.ca" target="_blank" to = "/url">
Google
</Button>
</CardActions>
</Card>
);
}

Answer 1

In case anyone runs across this issue with using the Link component from Material UI - a few comments addressed some of the issues.
Additionally, make sure you're importing the Link correctly from material ui since they've updated their API. I tried using the API provided ('#mui/material/Link') but had to use their old API (#material-ui/core/Link) for it to work.
If the import is correct, this is the the code that will open up a new tab to google while you're developing using localhost:
<Link target="_blank" href="http://www.google.com" rel="noreferrer">
View Link
</Link>