我可以将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">
答案 0 :(得分: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>
)
答案 1 :(得分:1)
您可以这样使用,将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>
);
答案 2 :(得分:0)
在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>