Les problèmes suivants avec l'animation onClick (le ListItem devient rouge):
<List>
<a href="https://www.google.com">
<ListItem button>
<ListItemText primary="Google" />
</ListItem>
</a>
</List>
Lors de l'ajout du lien dans ListItem, la transition ne fonctionne que si vous cliquez sur ListItemText, ce qui n'est pas ce que je veux. Quelle est la bonne façon d'ajouter un lien?
La façon la plus simple d'y parvenir est de faire du ListItem
un lien en utilisant le prop component
:
<List>
<ListItem button component="a" href="https://www.google.com">
<ListItemText primary="Google" />
</ListItem>
</List>
De cette façon, le ListItem
sera une balise d'ancrage reliant à l'endroit souhaité, mais recevra toujours le style approprié afin qu'il n'y ait pas de changements visuels.
Le comportement du component
prop est documenté ici . Notez que le href
prop sera automatiquement passé à la balise d'ancrage, comme spécifié par la dernière ligne dans la documentation des accessoires:
Toutes les autres propriétés fournies seront propagées à l'élément racine.
à utiliser avec "react-router-dom"
import { Link } from "react-router-dom";
<ListItem button component={Link} to="/design">
l'exemple est basé dans cette section: docs