material-ui 1.0 목록에 링크를 추가하는 방법

material-ui 1.0 목록에 링크를 추가하는 방법

다음은 onClick 애니메이션을 방해합니다(ListItem이 빨간색으로 바뀝니다).

<List>
  <a href="https://www.google.com">
    <ListItem button>
       <ListItemText primary="Google" />
     </ListItem>
   </a>
 </List>

ListItem 내부에 링크를 추가할 때 ListItem이 동작하는 경우에만 이행이 이루어집니다.텍스트가 클릭되고 있는데, 이것은 내가 원하는 것이 아니다.링크를 추가하는 올바른 방법은 무엇입니까?

to use with "react-router-dom"

import { Link } from "react-router-dom";
<ListItem button component={Link} to="/design">

이 예에서는 docs에 대해 설명합니다.

이를 실현하기 위한 가장 쉬운 방법은 이 시스템을ListItem를 사용한 링크component소품:

<List>
  <ListItem button component="a" href="https://www.google.com">
    <ListItemText primary="Google" />
  </ListItem>
</List>

그렇게 하면ListItem원하는 장소에 링크하는 앵커 태그가 되지만 시각적인 변화가 없도록 적절한 스타일링을 받을 수 있습니다.

의 동작component여기에 소품 설명이 있습니다.주의:href소품 설명서의 마지막 줄에 지정된 대로 소품이 앵커 태그로 자동으로 전달됩니다.

제공된 다른 속성은 루트 요소로 확산됩니다.

나도 같은 문제에 직면했지만 아마도 새로운 자료 업데이트일 것이다.이로 인해 UI가 동작하지 않아 '@material-ui/core/Link'에서 Import Link를 Import할 때 약간의 변경이 있습니다.

효과가 있을 것이다

 import Link from '@material-ui/core/Link';

 <List>
  <ListItem button component={Link} href="/dsda">
    <ListItemIcon>
      <DashboardIcon />
    </ListItemIcon>
    <ListItemText primary="DashBoard"/>
  </ListItem>
 </List>

재료 UI 드로어의 렌더링 링크

Next.js와 함께 사용할 경우 다음과 같이 처리했습니다.

import Link from "next/link";

<List>
    <Link href="/myUrl" passHref>
        <ListItem button component="a">
            My Link Text
        </ListItem>
    </Link>
</List>

mui V5 + NextJs의 경우 목록 항목 내에 여러 자녀(예: 텍스트 및 아이콘)를 두려면 다음과 같이 하십시오.

import {
  Link,
  ListItem,
  ListItemIcon,
  ListItemText,
} from '@mui/material';
import NextLink from 'next/link';

<NextLink href="/some/route" passHref>
  <ListItem
    button
    component={Link}
  >
    <ListItemIcon>
      <SupportIcon />
    </ListItemIcon>
    <ListItemText
      primary="Support"
      secondary="Get super friendly support"
    ></ListItemText>
  </ListItem>
</NextLink>

이게 진짜가 될 거야a- 페이지 새로고침 없이 nextjs-displays가 남아 있는 경우.

import React, { forwardRef } from "react";
// material-ui components
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
// react-router
import { Link as RouterLink } from "react-router-dom";
const ListItemLink = (props) => {
  const { icon, primary, to } = props;

  const renderLink = React.useMemo(
    () =>
      forwardRef((itemProps, ref) => (
        <RouterLink to={to} ref={ref} {...itemProps} />
      )),
    [to]
  );

  return (
    <>
      <ListItem button component={renderLink}>
        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
        <ListItemText primary={primary} />
      </ListItem>
    </>
  );
};

export default ListItemLink;

그건 사실 의사록에 나와 있어요

ListItem의buttonListItem 소품(MUI API Docs)에서 볼 수 있듯이 소품은 DEPRECUED가 되었습니다.

이것은 @JulesDupont answer에 의해 제안된 코드의 갱신 버전입니다.

<List>
  <ListItem>
    <ListItemButton component="a" href="https://www.google.com">
      <ListItemText primary="Google" />
    </ListItemButton>
  </ListItem>
</List>

언급URL : https://stackoverflow.com/questions/47206639/how-to-add-a-link-to-a-list-in-material-ui-1-0