Могу ли я использовать реакцию маршрутизатора Link с CardActionArea? - PullRequest
1 голос
/ 21 мая 2019

Могу ли я использовать реагирующий маршрутизатор Link с CardActionArea?

Вот мой код, где мой css не работает, потому что Как я могу использовать компонент Link

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>

Если я использую ниже href = "" в cardactionarea, это обновит страницу. Я не хочу обновлять страницу.

    <CardActionArea href="/Blog" disableRipple>

НАЙДЕНО РЕШЕНИЕ Если я использую Link как CardActionArea, мне нужно переписать Link css. Я нашел ниже решение.

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

1 Ответ

0 голосов
/ 21 мая 2019

Из документации 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>
...