Material-ui: react-router와 호환되는 ListItem 변환

다음과 같이 Link ListItem 을 (를) 래핑 할 수 있습니다.

<Link to="users" style={{ textDecoration: 'none' }}>
      <ListItem button >
        <ListItemIcon>
          <Person />
        </ListItemIcon>
        <ListItemText primary={<FormattedMessage id="user" />} />
      </ListItem>
    </Link>

이 접근 방식을 사용하면 onClick 메서드도 실행됩니다.
제안이나 개선 사항이 있습니까?

나는 다음과 같이 Link에 ListItem을 래핑 할 수 있음을 알았습니다.

이 솔루션은 의미 상 유효하지 않습니다. 문서에서 문제를 처리하는 방법을 살펴보십시오.

https://github.com/callemall/material-ui/blob/92bd073015b9cc0dff3a26195fcb49153ddaab78/docs/src/modules/components/AppDrawerNavItem.js#L71 -L83

당신은 또한 이것을 시도 할 수 있습니다

https://github.com/callemall/material-ui/blob/92bd073015b9cc0dff3a26195fcb49153ddaab78/docs/src/pages/demos/buttons/FlatButtons.js#L40 -L42

이는 https://material-ui.com/components/buttons/#third -party-routing-library 문서에서 다룹니다.

import React from 'react';
import { MemoryRouter as Router } from 'react-router';
import { Link, LinkProps } from 'react-router-dom';
import ListItem from '@material-ui/core/ListItem';
import { Omit } from '@material-ui/types';

// The usage of React.forwardRef will no longer be required for react-router-dom v6.
// see https://github.com/ReactTraining/react-router/issues/6056
const AdapterLink = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => (
  <Link innerRef={ref as any} {...props} />
));

const CollisionLink = React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'innerRef' | 'to'>>(
  (props, ref) => <Link innerRef={ref as any} to="/getting-started/installation/" {...props} />,
);

export default function ButtonRouter() {
  return (
    <Router>
      <ListItem color="primary" component={AdapterLink} to="/">
        Simple case
      </ListItem>
      <ListItem component={CollisionLink}>Avoids props collision</ListItem>
    </Router>
  );
}

문서에서 볼 수 없습니다.
https://material-ui-next.com/demos/lists/
https://material-ui-next.com/demos/drawers/

라우터 반응 사용할 때 일반적인 일이지만 그것을 사용하는 방법을 분명하지 않다 NavLink A의 ListItem .
component 소품이있는 Button ?
버튼 소품과 구성 요소 소품이 동일한 JSX 태그에 함께 혼합되어 있습니까?
이런 종류의 믹스 인은 무엇입니까?
왜 그렇게 복잡한가요?

@mehrdaad 의 솔루션을 사용할 때 링크는 일반 MUI 목록처럼 보이지만 @oliviertassinari가 제안한대로 component={Link} 를 사용하면 스타일이 엉망이됩니다.
(이미지에서 마우스는 "Build"위에 있지만 두 번째 항목에는 밑줄이 표시됩니다.)

@ilyador 이 UI 링크 스타일 문제가 해결되었습니다.

@ zhangwei900808 아니요, 여전히 의미 상 잘못되었습니다. <ul><a ..>... 생성됩니다.
https://codesandbox.io/s/lpwq74p30m

위에 제공된 답변을 사용하십시오.

@oliviertassinari 더 쉬운 방법이

const styles = {
    li: {
        '&:hover': {
            backgroundColor: 'transparent',
        },
    },
};
// ...
<MenuItem disableGutters className={classes.li}>
    <Button component={Link} to="/logout" ...

이중 호버 효과를 방지하려면 MenuItem 및 Button (여전히 약간의 거터 / 패딩이 있음, 또 다른 문제)
번거롭기 때문에

데모 : https://codesandbox.io/s/nk834yk5pl (사용하지 않는 component={Link} to="/..." 하지만 동일합니다)

@caub 추가 Button 구성 요소를 도입하는 이유는 무엇입니까? MenuItem에서 구성 요소 속성을 사용할 수 있습니다.

@oliviertassinari 왜냐하면 ul > a 은 유효하지 않기 때문입니다. html5 https://codesandbox.io/s/lpwq74p30m

@caub nav > a 은 (는) 유효합니다.

좋아, 감사합니다. https://codesandbox.io/s/lpwq74p30m

내 문제를 해결 한 해결책은 다음과 같습니다.

<List>
        {menus.map((menu: any, index: any) => {
          return (
            <ListItem
              key={index}
              {...{ to: menu.link }}
              component={Link}
              button={true}
            >
              <ListItemIcon>{menu.icon}</ListItemIcon>
              <ListItemText primary={menu.text} />
            </ListItem>
          );
        })}
      </List>

따라서 ListItem을 다음과 같이 사용하십시오.
key = {index}
** {... {to : menu.link}} **
component = {Link}
button = {true}
>

import {Link} from 'react-router-dom'

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

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

트윗 담아 가기

이것은 나에게 완벽했습니다. 감사!

MUI v4 마이그레이션 (4.3.1에 있음) 이후 가장 많이 득표 한 답변은 "함수 구성 요소에 참조를 제공 할 수 없습니다.이 참조에 액세스하려는 시도가 실패합니다. React.forwardRef ()를 사용하려고 했습니까?"로 인해 실패했습니다.

NavLink 구성 요소를 다음과 같은 래퍼로 교체했습니다.

import React, { Component } from "react"
import { NavLink } from "react-router-dom"

/**
 * React Router Nav Link wrapper to forward the ref to fix "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"
 *
 * From https://material-ui.com/guides/composition/#caveat-with-refs
 */
class NavLinkMui extends Component {
    render() {
        const { forwardedRef, ...props } = this.props
        return <NavLink {...props} ref={forwardedRef} />
    }
}

export default NavLinkMui

용법:

<ListItem
    button
    component={NavLinkMui}
    to='/'
>
    <ListItemIcon>
        <SlideshowIcon />
    </ListItemIcon>
</ListItem>

@HugoGresse 예, forward ref API를 사용해야합니다. 문서에서 예제를 찾을 수 있어야합니다. https://github.com/mui-org/material-ui/issues/7956#issuecomment -326908167을 최신 답변으로 업데이트했습니다. 괜찮은지 알려주세요.

@oliviertassinari 그랬 습니다.

Button 텍스트 색상이 테마 팔레트 색상을 고려하지 않는 forwardRef 솔루션 또는 Component 1에 여전히 문제가 있습니다. 텍스트 색상은 palette.type: 'dark' 와 일치하도록 흰색이어야하지만 흰색입니다.

component 소품 없이도 여전히 문제가 발생하기 때문에 MUI의 변경 사항과 연결되었을 수 있습니다.

여기에서 읽는 사람들을 위해 추가 소품을 ListItemText에 전달할 수 있습니다.

<ListItemText
    primaryTypographyProps={{
        color: 'textPrimary'
    }}
    primary="Dashboard"
/>

BTW, 귀하의 예는 이제 TS에 있습니다.

내 문제를 해결 한 해결책은 다음과 같습니다.

<List>
        {menus.map((menu: any, index: any) => {
          return (
            <ListItem
              key={index}
              {...{ to: menu.link }}
              component={Link}
              button={true}
            >
              <ListItemIcon>{menu.icon}</ListItemIcon>
              <ListItemText primary={menu.text} />
            </ListItem>
          );
        })}
      </List>

따라서 ListItem을 다음과 같이 사용하십시오.
key = {index}
** {... {to : menu.link}} **
component = {Link}
button = {true}
>

button={true} 단순히 서랍의 UI 동작을 링크가없는 것과 동일하게 만듭니다.

Typescript에서 이것을 시도하는 다른 사람들을 위해 :

ListItem 구성 요소 속성을 사용하여요소를 ListItem 구현으로 사용합니다. Typescript의 트릭은 ListItem의 소품에 스프레드 연산자 (...)를 사용하여이 유형의 구성 요소 및 ListItem에 대한 "to"속성을 지정하면 일반적으로 (Typescript 오류 TS2769 속성 '구성 요소'가 'IntrinsicAttributes ...'유형에 없습니다.

import { NavLink } from "react-router-dom";

        <List>
            <ListItem button={true} {...{ component: NavLink, to: "/Somewhere" }}>
                <ListItemIcon>
                    <ShoppingCartIcon />
                </ListItemIcon>
                <ListItemText primary="Orders" />
            </ListItem>
        </List>

또는 예를 들어 ListItem에서 onClick 함수를 사용하려는 경우 :

    <List>
        <ListItem button={true} {...{ onClick: () => alert("foo") }}>
            <ListItemIcon>
                <DashboardIcon />
            </ListItemIcon>
            <ListItemText primary="Dashboard" />
        </ListItem>
    </List>

```

이것은 나를 위해 일했습니다.

const NavLinkMui = React.forwardRef((props, ref) => (
  <NavLink {...props} activeClassName="Mui-selected" ref={ref} />
))

<ListItem button component={NavLinkMui} to={to}>{text}</ListItem>

MUI v4 마이그레이션 (4.3.1에 있음) 이후 가장 많이 득표 한 답변은 "함수 구성 요소에 참조를 제공 할 수 없습니다.이 참조에 액세스하려는 시도가 실패합니다. React.forwardRef ()를 사용하려고 했습니까?"로 인해 실패했습니다.

NavLink 구성 요소를 다음과 같은 래퍼로 교체했습니다.

import React, { Component } from "react"
import { NavLink } from "react-router-dom"

/**
 * React Router Nav Link wrapper to forward the ref to fix "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"
 *
 * From https://material-ui.com/guides/composition/#caveat-with-refs
 */
class NavLinkMui extends Component {
    render() {
        const { forwardedRef, ...props } = this.props
        return <NavLink {...props} ref={forwardedRef} />
    }
}

export default NavLinkMui

용법:

<ListItem
    button
    component={NavLinkMui}
    to='/'
>
    <ListItemIcon>
        <SlideshowIcon />
    </ListItemIcon>
</ListItem>

감사합니다 @HugoGresse 이것은 완벽하게 잘 작동합니다 :-)