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 구성 요소의 출처일 가능성이 있는 반응 라우터를 사용하는 경우 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" 사용하는 경우 괜찮습니다.

이제 다음 코드로 이것을 생성할 수 있습니다.
```
기본텍스트="텍스트"
컨테이너 요소={ }
/>
````

안녕하세요 @Glaadis Tnx, 작동합니다

마크업이 나에게 오류를 제공하는 @Glaadiss :

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

내가 React 또는 MUI의 오래된 버전을 가지고 있기 때문입니까?

@renannobile 구성 요소 중 하나에서 불필요한 {...props} 를 전달 하는지 확인하십시오. 가이드에서 복사하여 붙여넣을 때 흔히 하는 실수입니다 :P

@Glaadis 1.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에 대한 [object Object] 속성을 보여줍니다.

<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" rel="noopener noreferrer" 가 필요합니다.

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

ListItem pls와 함께 작동하지 않는 링크는 나를 도와주세요

@gautam751 사람들이 당신을 도울 수 있도록 코드 또는 저장소를 공유하십시오.

방금 이것에 부딪쳤습니다. 나는 이것을 사용하고 있으며 작동합니다.

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

저를 위해 일했습니다, 감사합니다
그러나 실제로 나는 이것을 다음과 같이 사용합니다.

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