Can I use react router Link with CardActionArea?

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

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>