我可以将反应路由器链接与 CardActionArea 一起使用吗？

Posted 2023-02-21

【中文标题】我可以将反应路由器链接与 CardActionArea 一起使用吗？

【英文标题】：Can I use react router Link with CardActionArea?

【发布时间】：2019-10-07 11:34:42

【问题描述】：

我可以将 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"> 

【问题讨论】：

在 CardActionArea 内移动 Link 怎么样？

【参考方案1】：

import  Link as RouterLink  from 'react-router-dom';
import  CardActionArea  from '@material-ui/core';


<CardActionArea component=RouterLink to='/Blog'>
    // ...
</CardActionArea >

【讨论】：

你好！虽然此代码 sn-p 可能是解决方案，但including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

这里也一样。请尽量在你的回答中更详细一点。

【参考方案2】：

在CardActionArea 中，将component 属性设置为Link，将to 设置为您想要的URL。这样您就可以使用浏览器的后退和前进按钮在您的 React 应用程序中导航。

例如：

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>

【参考方案3】：

这是我保持Button 风格不变的解决方案。

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>
)

【讨论】：

完美运行，不会干扰 Material UI 操作区域/按钮样式！

【参考方案4】：

你可以这样使用，把你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>
    );

【参考方案5】：

从documentationCardActionArea取两个props类和children，作为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>

【讨论】：

我不得不将 <Link to="/Blog">...</Link> 更改为 <Link href="/Blog">...</Link> 以克服编译错误。