¿Cómo puedo hacer que un componente de Button de reacción de Material UI actúe como un componente de Link de react-router-dom sin perder su estilo original? Como cambiar la ruta al hacer clic.
import Button from '@material-ui/core/Button'; <Button variant="contained" color="primary"> About Page </Button> A algo como esto, pero manteniendo el estilo Button original:
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>Bueno, esto es muy fácil, no sé por qué no funcionaba conmigo:
Solo haz esto:
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>Puede encontrar más detalles en https://next.material-ui.com/guides/routing/ .
MUI 5 ha simplificado esto aún más. Simplemente proporcione un Button MUI con un atributo href de la siguiente manera:
import Button from '@mui/material/Button'; <Button href="/" variant="contained"> Link </Button>Debe envolver el <Button /> dentro del componente <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> )