Material-ui: ListItem a un lien ?

@TonyFrancis Vous devriez pouvoir ajouter un attribut href au ListItem.

@TonyFrancis J'ai reçu votre commentaire sur gitter et il semble que cela fonctionne. Je vais continuer et fermer ceci pour le moment - veuillez rouvrir s'il y a toujours un problème.

href doit être ajouté au document

Éditer:
Putain ! Ce problème est traité au #2243. En général; il n'est pas clair dans la documentation quelles sont toutes les propriétés disponibles. Cela devrait être documenté et la déclaration suivante n'aide pas.
Other properties (no documented) are applied to the root element.
J'ai regardé l'implémentation de github List et je ne vois pas un composant de conteneur utilisé qui a la propriété containerElement .

Sur la base de la réponse de @TonyFrancis , le href ne répond pas pleinement au besoin. Si vous utilisez un routeur React, qui est probablement d'où provient le composant Link , vous bénéficiez de certains avantages, tels que la possibilité de spécifier un basename .

Par exemple, si vous avez <Router basename='/my-app'> enveloppant votre application, alors

< ListItem primaryText = { <Link to="a" > as </Link> } />

serait lié à my-app/a sans avoir besoin de transporter ce basename partout.

La documentation n'est pas assez claire pour moi. Hmmm

Il n'y a pas de champ href dans le document pour ListItem

Je viens de tomber sur ça. J'utilise ça et ça marche :

<ListItem button component={Link} to='/some-url'>...</ListItem>

@mariotacke ^ ce code génère ul > a balisage https://github.com/mui-org/material-ui/issues/7956#issuecomment -362433602

edit : c'est bien si le parent est un <nav> ou utilise component="nav"

Maintenant, vous pouvez le créer avec le code suivant :
```
PrimaryText="Texte"
élémentconteneur={ }
/>
````

Hé @Glaadiss Tnx, ça marche

@Glaadiss ce balisage me donne une erreur :

Warning: React does not recognize the containerElement prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase containerelement instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Est-ce parce que j'ai une version obsolète de React ou MUI ?

@renannobile Vérifiez si vous passez des {...props} inutiles dans l'un de vos composants. C'est une erreur courante lorsque nous faisons un copier-coller à partir de guides :P

@Glaadiss Je ne semble pas pouvoir l'utiliser sur 1.0.0-beta.44

A essayé:

<List component="nav">
    <ListItem component={Link} to="/admin/user">
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

Le cas ci-dessus fonctionne mais sans effet d'entraînement et il en résulte un a avec un div comme enfant, ce qui est illégal.

<List component="nav">
    <ListItem primaryText="Inbox" component={Link} to="/admin/user">
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

Le cas ci-dessus fonctionne mais sans effet d'entraînement et il en résulte un élément sans texte visible.

<List component="nav">
    <ListItem primaryText="Inbox" containerElement={<Link to="/admin/user" />}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

Ce cas ci-dessus montre un attribut [object Object] pour containerElement dans le code HTML.

<List component="nav">
    <ListItem ContainerComponent={() => <Link to="/admin/user" />}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

<List component="nav">
    <ListItem ContainerComponent={Link to="/admin/user" />}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>



md5-7ff35357efa037d9c88356d4d3bf14ad



<List component="nav">
    <ListItem ContainerComponent={Link} ContainerProps={{ to: '/admin/user' }}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

Ahhh ! La solution est la suivante.

<List component="nav">
    <ListItem component={Link} to="/admin/user" button>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

@mschipperheyn cela fonctionne mais cela gâche l'effet d'entraînement

Bonjour, des mises à jour sur la façon de procéder correctement?

Cela fonctionne pour moi, y compris Ripple:

<ListItem button component={
  ({ children, ...props }) =>
    <Link to="/" {...props as LinkProps}>
      {children}
    </Link>
}>

L'approche suivante a fonctionné pour moi, car elle est capable de conserver le style d'origine et le comportement flexible.

<ListItem component={props => (
  <ListItem button>
    <Link style={{
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    }}
    to={"/"}>
    </Link>
    {props.children}
  </ListItem>
)}>
    <ListItemIcon>
      <ArrowForwardIcon/>
    </ListItemIcon>
    <ListItemText primary="List Item" />
</ListItem>

Pour les utilisateurs de Next.js :

<List component="nav">
  <Link href="/admin/resources" passHref>
    <ListItem component="a" button>
      <ListItemIcon>
        <InboxIcon />
      </ListItemIcon>
      <ListItemText primary="Resources" />
    </ListItem>
  </Link>
  ...

Cela peut sembler évident - mais si vous n'avez pas besoin d'utiliser <Link/> et pouvez utiliser <a> (c'est-à-dire que vous n'obtenez pas les avantages du SPA que vous écrivez), vous pouvez le faire :

<a href="/yourlink">
  <ListItem
    button
  >
    <ListItemText primary="Your Link Text" />
  </ListItem>
</a>

Par défaut, Eslint devrait exiger rel="noopener noreferrer" si target="_blank"

              <List>
                <a
                  href="https://fb.me/xxxxxxxxx"
                  target="_blank"
                  rel="noopener noreferrer"
                  className={classes.hrefLink}
                >
                  <ListItem button>
                    <ListItemIcon>
                      <ThumbUp className={classes.icon32} />
                    </ListItemIcon>
                    <ListItemText primary="Visit our Facebook Page" secondary="@xxxxxxxxxx" />
                  </ListItem>
                </a>
              </List>

Cela fonctionne avec la v4 :

    <ListItem button to={to} component={Link}>
      {children}
    </ListItem>

Voici mon approche, en utilisant la classe Mui-selected intégrée :

<ListItem
  button
  component={NavLink}
  activeClassName={"Mui-selected"}
  to={"/some-url"}
  exact
>
  ...
</ListItem>

Le lien ne fonctionne pas avec ListItem merci de m'aider antone

@gautam751 partagez votre code ou votre

Je viens de tomber sur ça. J'utilise ça et ça marche :

<ListItem button component={Link} to='/some-url'>...</ListItem>

A travaillé pour moi, merci
mais en fait je l'utilise comme ça :

<ListItem button component={Link} to="/SomePath">
       ...
</ListItem>