Material-ui: ListItemにリンクがありますか？

@TonyFrancis href属性をListItemに追加できるはずです。

@TonyFrancis gitterについてコメントがありましたが、これが機能したようです。 とりあえずこれを閉じます。まだ問題がある場合は、もう一度開いてください。

hrefをドキュメントに追加する必要があります

編集：
やめろ！ この問題は＃2243で対処されています。 一般に; ドキュメントから、使用可能なすべてのプロパティが何であるかは明確ではありません。 これは文書化する必要があり、次のステートメントは役に立ちません。
Other properties (no documented) are applied to the root element.
github Listの実装を調べましたが、 containerElementプロパティを持つコンテナコンポーネントが使用されていません。

@TonyFrancisの応答に基づくと、hrefはニーズを完全には満たしていません。 Linkコンポーネントの出所である可能性が高いreactルーターを使用している場合は、 basenameを指定できるなどの利点があります。

たとえば、アプリを<Router basename='/my-app'>ラップしている場合、

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

basenameをどこにでも持ち歩く必要なしに、 my-app/aリンクします。

ドキュメントは私にとって十分に明確ではありません。 うーん

ListItemのドキュメントにhrefフィールドはありません

ちょうどこれに遭遇しました。 私はこれを使用していて、それは機能します：

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

@mariotacke ^このコードはul > aマークアップを生成しますが、これは意味的に有効ではありません。https： //github.com/mui-org/material-ui/issues/7956#issuecomment-362433602を参照して

編集：親が<nav>か、 component="nav"使用している場合は問題ありません

これで、次のコードでこれを作成できます。
`` `
primaryText = "Text"
containerElement = { }
/>
`` ``

ねえ@GlaadissTnx 、それは動作します

@Glaadissそのマークアップは私にエラーを与えます：

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.

それは私が古いバージョンのReactまたはMUIを持っているからですか？

@renannobileコンポーネントの1つで不要な{...props}を渡しているかどうかを確認してください。 ガイドからコピー＆ペーストするときによくある間違いです：P

@ Glaadiss1.0.0 -beta.44では使用できないようです

試した：

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

上記のケースは機能しますが、波及効果はなく、結果としてdivを子としてaなり、これは違法です。

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

上記の場合は機能しますが、波及効果がなく、テキストが表示されないアイテムになります。

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

上記のケースは、HTMLのcontainerElementの[objectObject]属性を示しています。

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

ああ！ 解決策はこれです。

<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これは機能しますが、波及効果が台無しになります

こんにちは、これを適切に行う方法に関する更新はありますか？

これは、リップルを含めて、私にとってはうまくいきます。

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

次のアプローチは、元のスタイルとフレックス動作を維持できるため、私にとってはうまくいきました。

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

Next.jsユーザーの場合：

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

あなたが使用する必要がない場合は-これは明らかに思えるかもしれません<Link/>して使用することができます<a> （すなわち-あなたが書いているSPAの利点を得ることはありません）あなたがこれを行うことができます：

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

デフォルトではEslintは要求すべきであるrel="noopener noreferrer"場合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>

これはv4で動作します：

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

組み込みのMui-selectedクラスを使用した私のアプローチは次のとおりです。

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

ListItemplsでリンクが機能しないことは私が贖うのを助けます

@ gautam751コードまたはリポジトリを共有してください。そうすれば、他の人があなたを助けてくれます。

ちょうどこれに遭遇しました。 私はこれを使用していて、それは機能します：

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

私のために働いてくれてありがとう
しかし実際には私はそれをこのように使用します：

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