Material-ui: ListItem tiene un enlace?

@TonyFrancis Debería poder agregar un atributo href al ListItem.

@TonyFrancis Recibí tu comentario sobre gitter y parece que lo hiciste funcionar. Continuaré y cerraré esto por ahora; vuelva a abrirlo si todavía hay un problema.

href debe agregarse al documento

Editar:
¡Maldita sea! Este problema se trata en el número 2243. En general; no está claro en la documentación cuáles son todas las propiedades disponibles. Esto debe estar documentado y la siguiente declaración no ayuda.
Other properties (no documented) are applied to the root element.
Miré la implementación de la Lista de github y no veo que se esté usando un componente contenedor que tenga la propiedad containerElement .

Según la respuesta de @TonyFrancis , el href no satisface completamente la necesidad. Si está utilizando el enrutador react, que probablemente es de donde proviene el componente Link , obtendrá algunos beneficios, como poder especificar un basename .

Por ejemplo, si tiene <Router basename='/my-app'> envolviendo su aplicación, entonces

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

se vincularía a my-app/a sin la necesidad de llevar ese basename a todas partes.

La documentación no es lo suficientemente clara para mí. mmm

No hay un campo href en el documento para ListItem

Me encontré con esto. Estoy usando esto y funciona:

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

@mariotacke ^ este código genera ul > a marcado, que no es semánticamente válido, consulte https://github.com/mui-org/material-ui/issues/7956#issuecomment -362433602

editar: está bien si el padre es <nav> o usa component="nav"

Ahora, puede crear esto con el siguiente código:
''
primaryText = "Texto"
containerElement = { }
/>
`` ``

Hola @Glaadiss Tnx, funciona

@Glaadiss ese marcado me da un error:

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

¿Es eso porque tengo una versión desactualizada de React o MUI?

@renannobile Compruebe si pasa {...props} innecesarios en uno de sus componentes. Es un error común cuando copiamos y pegamos de las guías: P

@Glaadiss Parece que no puedo usar esto en 1.0.0-beta.44

Intentado:

<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>

El caso anterior funciona pero sin el efecto dominó y da como resultado un a con un div como hijo, lo cual es ilegal.

<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>

El caso anterior funciona pero sin el efecto dominó y da como resultado un elemento sin texto 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>

Este caso anterior muestra un atributo [object Object] para containerElement en el 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>

¡Ah! La solucion es esta.

<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 esto funciona pero se mete con el efecto

Hola, ¿alguna actualización sobre cómo hacer esto correctamente?

Esto funciona para mí, incluida la ondulación:

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

El siguiente enfoque funcionó para mí, porque es capaz de conservar el estilo original y el comportamiento 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>

Para los usuarios de Next.js:

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

Esto puede parecer obvio, pero si no necesita usar <Link/> y puede usar <a> (es decir, no obtiene las ventajas del SPA que está escribiendo), puede hacerlo :

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

Por defecto, Eslint debería requerir rel="noopener noreferrer" if 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>

Esto funciona con v4:

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

Este es mi enfoque, usando la clase Mui-selected incorporada:

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

El enlace no funciona con ListItem, por favor ayúdame antone

@ gautam751 comparte tu código o repositorio, por favor, para que la gente pueda ayudarte

Me encontré con esto. Estoy usando esto y funciona:

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

Funcionó para mí, gracias
pero en realidad lo uso así:

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