Can I use react router Link with CardActionArea? - reactjs

Question

Can I use react router Link with CardActionArea?
Here is my code where my css is broken because How can I use Link component
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>
If i use below href="" in cardactionarea it will refresh page. I don't want to refresh page.
<CardActionArea href="/Blog" disableRipple>
FOUND SOLUTION
If I use Link as CardActionArea I need to overwrite Link css. I have found below solution.
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

You can using like this, put you CardActionArea component in 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

From the documentation CardActionArea takes two props classes and children, add the link as a child.
<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>

Answer 4

In CardActionArea set component prop to Link and to to your desired URL. This way you can use browser's back and forward button to navigate in your React application.
For example:
import { Link } from "react-router-dom";
import {
Card,
CardActionArea,
CardContent,
Typography,
} from "#mui/material";
<Card>
<CardActionArea
component={Link}
to="YOUR-URL"
>
<CardContent>
<Typography variant="h5">
Card Title
</Typography>
<Typography variant="body2" color="text.secondary">
Card Description
</Typography>
</CardContent>
</CardActionArea>
</Card>

Answer 5

This is my solution to keep the same Button style.
import { Link, LinkProps } from 'react-router-dom'
import Button from '#material-ui/core/Button'
const CardButton: React.FC<LinkProps> = ({ children, ...linkProps }) => (
<Link style={{ textDecoration: 'none' }} {...linkProps}>
<Button size="small" color="primary">
{children}
</Button>
</Link>
)