Material-ui: ListItem memiliki tautan?

@TonyFrancis Anda harus dapat menambahkan atribut href ke ListItem.

@TonyFrancis Mendapat komentar Anda tentang gitter dan sepertinya Anda berhasil. Saya akan melanjutkan dan menutup ini untuk saat ini - silakan buka kembali jika masih ada masalah.

href perlu ditambahkan ke dokumen

Sunting:
Dan itu! Masalah ini telah diatasi di #2243. Secara umum; tidak jelas dari dokumentasi apa semua properti yang tersedia. Ini harus didokumentasikan dan pernyataan berikut tidak membantu.
Other properties (no documented) are applied to the root element.
Saya melihat implementasi Daftar github dan saya tidak melihat komponen wadah yang digunakan yang memiliki properti containerElement .

Berdasarkan respons @TonyFrancis , href tidak sepenuhnya memenuhi kebutuhan. Jika Anda menggunakan router reaksi yang kemungkinan berasal dari komponen Link maka Anda mendapatkan beberapa manfaat seperti dapat menentukan basename .

Misalnya jika Anda memiliki <Router basename='/my-app'> membungkus aplikasi Anda, maka

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

akan menautkan ke my-app/a tanpa perlu membawa basename ke mana-mana.

Dokumentasinya tidak cukup jelas bagi saya. hmmm

Tidak ada bidang href dalam dokumen untuk ListItem

Baru saja mengalami ini. Saya menggunakan ini dan berfungsi:

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

@mariotacke ^ kode ini menghasilkan markup ul > a , yang tidak valid secara semantik, lihat https://github.com/mui-org/material-ui/issues/7956#issuecomment -362433602

edit: tidak masalah jika induknya adalah <nav> atau menggunakan component="nav"

Sekarang, Anda dapat membuatnya dengan kode berikut:
```
primerTeks="Teks"
wadahElement={ }
/>
````

Hai @Glaadiss Tnx, berhasil

@Glaadiss markup itu memberi saya kesalahan:

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.

Apakah itu karena saya memiliki React atau MUI versi lama?

@renannobile Periksa apakah Anda melewatkan {...props} di salah satu komponen Anda. Ini adalah kesalahan umum ketika kami menyalin-tempel dari panduan: P

@Glaadiss Sepertinya saya tidak bisa menggunakan ini di 1.0.0-beta.44

Dicoba:

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

Kasus di atas berfungsi tetapi tanpa efek riak dan menghasilkan a dengan div sebagai anak, yang 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>

Kasus di atas berfungsi tetapi tanpa efek riak dan menghasilkan item tanpa teks yang terlihat.

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

Kasus di atas menunjukkan atribut [object Object] untuk containerElement dalam 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! Solusinya adalah ini.

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

@mchipperheyn ini berfungsi tetapi mengacaukan efek riak

Halo, ada pembaruan tentang cara melakukan ini dengan benar?

Ini berfungsi untuk saya, termasuk riak:

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

Pendekatan berikut berhasil untuk saya, karena dapat mempertahankan gaya asli dan perilaku fleksibel.

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

Untuk pengguna Next.js:

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

Ini mungkin tampak jelas - tetapi jika Anda tidak perlu menggunakan <Link/> dan dapat menggunakan <a> (yaitu - Anda tidak mendapatkan keuntungan dari SPA yang Anda tulis), Anda dapat melakukan ini :

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

Secara default, Eslint membutuhkan rel="noopener noreferrer" jika 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>

Ini bekerja dengan v4:

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

Inilah pendekatan saya, menggunakan kelas Mui-selected bawaan:

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

Tautan tidak berfungsi dengan ListItem tolong bantu saya antone

@gautam751 tolong bagikan kode atau repo Anda, agar orang dapat membantu Anda

Baru saja mengalami ini. Saya menggunakan ini dan berfungsi:

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

Bekerja untuk Saya, Terima Kasih
tapi sebenarnya saya menggunakannya seperti ini:

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