Material-ui: ListItem имеет ссылку?

@TonyFrancis У вас должна быть возможность добавить атрибут href в ListItem.

@TonyFrancis Получил ваш комментарий о gitter, похоже, у вас это работает. Я пока закрою это - пожалуйста, откройте снова, если проблема не исчезнет.

href нужно добавить в документ

Редактировать:
Черт возьми! Эта проблема адресована # 2243. В целом; из документации не ясно, каковы все доступные свойства. Это должно быть задокументировано, и следующее утверждение не поможет.
Other properties (no documented) are applied to the root element.
Я посмотрел на реализацию списка github и не увидел, что используется компонент контейнера со свойством containerElement .

Судя по ответу @TonyFrancis, href не полностью удовлетворяет потребность. Если вы используете реагирующий маршрутизатор, который, вероятно, является источником компонента Link тогда вы получите некоторые преимущества, такие как возможность указать basename .

Например, если у вас есть <Router basename='/my-app'> упаковывающее ваше приложение, тогда

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

будет ссылаться на my-app/a без необходимости носить с собой basename повсюду.

Для меня документация недостаточно ясна. Хм

В документе нет поля href для ListItem

Просто столкнулся с этим. Я использую это, и это работает:

<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 = "Текст"
containerElement = { }
/>
`` ''

Привет @Glaadiss Tnx, это работает

@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 Проверьте, не передаете ли вы ненужные {...props} в один из ваших компонентов. Распространенная ошибка, когда мы копируем и вставляем из руководств: P

@Glaadiss Кажется, я не могу использовать это в 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>

Вышеупомянутый случай работает, но без эффекта пульсации и приводит к a с дочерним элементом div, что является незаконным.

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

В этом примере выше показан атрибут [object Object] для containerElement в 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>

Ах! Решение вот в чем.

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

Ссылка не работает с ListItem, пожалуйста, помогите мне antone

@ gautam751 поделитесь своим кодом или

Просто столкнулся с этим. Я использую это, и это работает:

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

Работал для меня, спасибо
но на самом деле я использую это так:

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