Lo siguiente interfiere con la animación onClick (el ListItem se vuelve rojo):
<List> <a href="https://www.google.com"> <ListItem button> <ListItemText primary="Google" /> </ListItem> </a> </List>Al agregar el enlace dentro de ListItem, solo hace que la transición funcione si se hace clic en ListItemText, que no es lo que quiero. ¿Cuál es la forma correcta de agregar un enlace?
La forma más fácil de lograr esto es hacer que ListItem sea un enlace usando el component prop:
<List> <ListItem button component="a" href="https://www.google.com"> <ListItemText primary="Google" /> </ListItem> </List> De esa manera, el ListItem será una etiqueta de anclaje que vinculará al lugar deseado, pero aún recibirá el estilo adecuado para que no haya cambios visuales.
El comportamiento del component prop se documenta aquí . Tenga en cuenta que la propiedad href se pasará automáticamente a la etiqueta de anclaje, como se especifica en la última línea en la documentación de accesorios:
Cualquier otra propiedad proporcionada se extenderá al elemento raíz.
Me he enfrentado al mismo problema, pero tal vez una nueva actualización en materialUI debido a que esto no funciona. Hay algunos ajustes como importar desde el enlace de importación desde '@material-ui/core/Link';
entonces funcionará
import Link from '@material-ui/core/Link'; <List> <ListItem button component={Link} href="/dsda"> <ListItemIcon> <DashboardIcon /> </ListItemIcon> <ListItemText primary="DashBoard"/> </ListItem> </List>Enlace de procesamiento en el cajón de la interfaz de usuario del material