时间戳

首页 > 解决方案 > 如何将外部 url 与 Material UI 中的按钮链接？

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

问题描述

我对 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>
  );
}

标签： reactjswebmaterial-ui

解决方案

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

此外，请确保您从材料 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>

推荐阅读