如何将Material UI的React按钮作为react-router-dom链接使用？

Question

我怎样才能让Material UI的react 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>

- Diogo Capela

---

可能是[Material-ui添加来自react-router的Link组件]的重复问题(https://dev59.com/6VoU5IYBdhLWcg3wFEA6)。 - Tholle

Answer 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://mui.com/material-ui/guides/routing/找到更多细节。

- Diogo Capela

---

如何为“Link”指定更多的属性，例如“exact”？ - Tin

这超出了这个问题的范围，但是有没有办法使其动态化？假设我不传递链接属性，也不使用 component={ Link }。 - Riza Khan

看起来在MUI 5版本中这个有些不同了。https://mui.com/guides/routing/ - brandonscript

Answer 2

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

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


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

- andromeda

---

这应该是一个被选中的答案。谢谢。 - marko424

这里不使用react-router的Link组件，而是使用默认的'a' html组件。 - Maiky

@Maiky 当提供 href 属性时，用于“Button”的默认组件是锚点 <a>。但是，您可以使用属性 LinkComponent 指定要使用的组件，例如 LinkComponent={Link}。 - Bro3Simon

Answer 3

您需要将<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>
)

- Peeyush Kumar

---

这种方法也可以。只需要给Link去掉下划线的样式即可。谢谢。 - Valay

这对我非常有帮助，因为我遇到了一个问题，我有一个用于 Link 的包装器，所以 component={Link} 方法不知何故导致 Material-UI 中的样式丢失。这种方法恢复了样式。 - c_sagan

一个链接内部的按钮不是有效的HTML（参见https://dev59.com/0Ww15IYBdhLWcg3wy-zO），即使浏览器可以解析，它的语义很差并且会导致a11y问题。 - filoxo

Answer 4

这种方式对我有用

import Button from '@material-ui/core/Button';
import { useHistory } from 'react-router-dom';

const YourComponentName = () =>{

    const history = useHistory();
    const handleRoutes = (path) =>{
       history.push(path)
    }
    
  return(
    <>
      ...
      <Button 
         variant="contained" 
         color="primary" 
         onClick={() => handleRoutes('/about')}>
         About Page
      </Button>
      ...
    </>
)
}

- Isuru Bandara

---

它的行为不同于链接，例如：您无法单击鼠标滚轮在另一个选项卡中打开链接。我不建议使用这种方法，因为它可能导致糟糕的用户体验。 - Mantas Giniūnas