Question

我可以将React Router Link与CardActionArea一起使用吗？

这是我的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>

解决方案如果我将Link用作CardActionArea，则需要覆盖Link CSS。我发现下面的解决方案。

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

Answer 1

这是我保持相同Button风格的解决方案。

import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button'

const CardButton: React.FC<{ to: string }> = ({ children, to }) => (
  <Link to={to} style={{ textDecoration: 'none' }}>
    <Button size="small" color="primary">
      {children}
    </Button>
  </Link>
)

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

在documentation 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>

我可以在CardActionArea中使用React Router Link吗？

3 个答案: