Material-ui: ListItem tem link?

@TonyFrancis Você deve ser capaz de adicionar um atributo href ao ListItem.

@TonyFrancis Recebeu seu comentário sobre o gitter e parece que você fez isso funcionar. Vou encerrar isso por agora - abra novamente se ainda houver um problema.

href precisa ser adicionado ao documento

Editar:
Que droga! Esse problema foi solucionado em # 2243. Em geral; não está claro na documentação quais são todas as propriedades disponíveis. Isso deve ser documentado e a declaração a seguir não ajuda.
Other properties (no documented) are applied to the root element.
Eu olhei para a implementação da lista do github e não estou vendo um componente de contêiner sendo usado com a propriedade containerElement .

Com base na resposta @TonyFrancis, o href não satisfaz totalmente a necessidade. Se você estiver usando o roteador react, que provavelmente é de onde o componente Link está vindo, você obterá alguns benefícios, como ser capaz de especificar um basename .

Por exemplo, se você tiver <Router basename='/my-app'> envolvendo seu aplicativo, então

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

vincularia a my-app/a sem a necessidade de carregar aquele basename por toda parte.

A documentação não é clara o suficiente para mim. Hmmm

Não há campo href no documento para ListItem

Apenas corri para isso. Estou usando isso e funciona:

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

@mariotacke ^ este código gera ul > a markup, que não é semanticamente válido, consulte https://github.com/mui-org/material-ui/issues/7956#issuecomment -362433602

editar: está tudo bem se o pai é um <nav> ou usa component="nav"

Agora, você pode criar isso com o seguinte código:
`` `
primaryText = "Texto"
containerElement = { }
/>
`` ``

Ei @Glaadiss Tnx, funciona

@Glaadiss, essa marcação me dá um erro:

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.

É porque tenho uma versão desatualizada do React ou do MUI?

@renannobile Verifique se você está passando {...props} desnecessários em um de seus componentes. É um erro comum quando copiamos e colamos dos guias: P

@Glaadiss Não consigo usar isso no 1.0.0-beta.44

Testado:

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

O caso acima funciona, mas sem o efeito cascata e resulta em a com um div como filho, o que é 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>

O caso acima funciona, mas sem o efeito cascata e resulta em um item sem texto visível.

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

O caso acima mostra um atributo [Object Object] para containerElement no 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>

Ahh! A solução é 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 isso funciona, mas mexe com o efeito cascata

Olá, alguma atualização sobre como fazer isso corretamente?

Isso funciona para mim, incluindo ondulação:

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

A abordagem a seguir funcionou para mim, porque é capaz de manter o estilo original e o comportamento flexível.

<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 usuários Next.js:

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

Isso pode parecer óbvio - mas se você não precisa usar <Link/> e pode usar <a> (ou seja, você não obtém as vantagens do SPA que está escrevendo), pode fazer isso :

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

Por padrão, o Eslint deve exigir rel="noopener noreferrer" se 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>

Isso funciona com a v4:

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

Esta é minha abordagem, usando a classe Mui-selected integrada:

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

Link não funciona com ListItem, por favor me ajude antone

@ gautam751 compartilhe seu código ou

Apenas corri para isso. Estou usando isso e funciona:

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

Funcionou para mim, obrigado
mas na verdade eu uso assim:

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