reactjs - 如何将外部 url 与 Material UI 中的按钮链接？

Question

我对 Material-UI 很陌生，并使用 localhost 测试我的网络应用程序。基本上，我创建了一个按钮，当用户单击它时，该按钮将路由到外部 url(目前为 www.google.ca)。由于未知原因，单击按钮会路由到 http://localhost:3001/www.google.ca 而不是 https://www.google.ca 。不确定问题是什么？

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

如果有人在使用 Material UI 中的链接组件时遇到此问题 - 一些评论解决了一些问题。

此外，请确保您从 Material ui 中正确导入链接，因为他们已经更新了 API。我尝试使用提供的 API ('@mui/material/Link')，但必须使用他们的旧 API (@material-ui/core/Link) 才能正常工作。

如果导入正确，这就是在您使用 localhost 进行开发时向 google 打开新选项卡的代码:

<Link target="_blank" href="http://www.google.com" rel="noreferrer">
View Link
</Link>