我可以在 CardActionArea 中使用 react router Link 吗？

Question

我可以在 CardActionArea 中使用 react router Link 吗？

这是我的 css 损坏的代码，因为我如何使用链接组件

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    <Link to="/Blog">
      <CardActionArea component="div" disableRipple>
        <CardMedia
          className={classes.media}
          image="images/marmik.jpg"
          title="Marmik Desai"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Marmik Desai
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            I am front end developer.
          </Typography>
        </CardContent>
      </CardActionArea>
    </Link>

如果我在 cardactionarea 中使用下面的 href="" 它将刷新页面。我不想刷新页面。

    <CardActionArea href="/Blog" disableRipple>

找到的解决方案如果我使用链接作为 CardActionArea 我需要覆盖链接 css。我找到了以下解决方案。

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<CardActionArea component={Link} to="/Blog"> 

Answer 1

import { Link as RouterLink } from 'react-router-dom';
import { CardActionArea } from '@material-ui/core';


<CardActionArea component={RouterLink} to={'/Blog'}>
    // ...
</CardActionArea >

Answer 2

您可以像这样使用，将CardActionArea组件放入Link

return (
        <Card className={classes.root}>
            <Link to="/Blog" component={CardActionArea}>
                <CardMedia
                    className={classes.media}
                    image={props.thumbnail}
                    title={props.thumbnail}
                />
                <CardContent>
                    <Typography gutterBottom variant="h6" component="h6">
                        {props.title}
                    </Typography>
                    <Typography variant='caption' component={"sm"}>
                        Update at {(Date(props.date).substring(0, 16))}
                        on {props.category}
                    </Typography>
                    <Divider />
                    <Typography variant="body2" component="p">
                        {props.subtitle}
                    </Typography>
                </CardContent>
            </Link>
            <CardActions>
                {!props.isAdmin && <Link to={props.admin_url} component={Button} size="small" >Edit</Link>}
                <Link to={props.public_url} component={Button} size="small" >Readmore</Link>
            </CardActions>
        </Card>
    );

Answer 3

从文档 CardActionArea中获取两个道具类和子级，将链接添加为子级。

<CardActionArea component="div" disableRipple>
  <Link to="/Blog">
    <CardMedia
      className={classes.media}
      image="images/marmik.jpg"
      title="Marmik Desai"
    />
    <CardContent>
      <Typography gutterBottom variant="h5" component="h2">
        Marmik Desai
  </Typography>
      <Typography variant="body2" color="textSecondary" component="p">
        I am front end developer.
  </Typography>
    </CardContent>
  </Link>
</CardActionArea>