如何使 Material UI 反应按钮充当 react-router-dom 链接？

Posted 2023-02-21

【中文标题】如何使 Material UI 反应按钮充当 react-router-dom 链接？

【英文标题】：How to make a Material UI react Button act as a react-router-dom Link?

【发布时间】：2019-01-09 13:42:01

【问题描述】：

如何使 Material UI 响应 Button 组件作为 react-router-dom 的 Link 组件而不会丢失其原始样式？就像点击时改变路线一样。

import Button from '@material-ui/core/Button';

<Button variant="contained" color="primary">
    About Page
</Button>

类似这样，但保持原来的Button 风格：

import Button from '@material-ui/core/Button';
import  Link  from 'react-router-dom';

<Button variant="contained" color="primary">
    <Link to="/about">
        About Page
    </Link>
</Button>

【问题讨论】：

Material-ui adding Link component from react-router的可能重复

【参考方案1】：

好的，这很容易，我不知道为什么它不适合我：

就这样吧：

import Button from '@material-ui/core/Button';
import  Link  from 'react-router-dom';

<Button component=Link to="/about" variant="contained" color="primary">
  About Page
</Button>

您可以在https://next.material-ui.com/guides/routing/找到更多详细信息。

【讨论】：

如何为Link指定更多属性，如exact？

这超出了这个问题的范围，但无论如何要使这个动态？说我不传递链接道具，不要使用component= Link

现在在 MUI 5 版本中看起来有点不同。 mui.com/guides/routing

【参考方案2】：

您需要将<Button /> 包装在<Link /> 组件内。

import Button from '@material-ui/core/Button';
import  Link  from 'react-router-dom';

const ButtonWithLink = () => (
  <Link to="/about">
   <Button variant="contained" color="primary">
     About Page
   </Button>
  </Link>
)

【讨论】：

这种方式也可以。只需提供样式即可从Link 中删除下划线。谢谢

这对于我遇到的问题非常有帮助，因为我有一个 Link 的包装器，因此 component=Link 方法由于某种原因导致 Material-UI 的样式丢失。此方法恢复了样式。

【参考方案3】：

MUI 5 进一步简化了这一点。只需提供带有 href 属性的 MUI Button，如下所示：

import Button from '@mui/material/Button';


<Button href="/" variant="contained">
  Link
</Button>