ReactJs Router Link와 material-ui 컴포넌트(버튼 등)를 조합하는 방법

ReactJs Router Link와 material-ui 컴포넌트(버튼 등)를 조합하는 방법

리액트 라우터의 기능과 머티리얼 UI 컴포넌트를 조합할 수 있는 솔루션을 찾아야 합니다.

예를 들어 라우터와 버튼의 시나리오가 있습니다.제가 하려고 했던 것은 그것들을 섞어서 다시 정리하는 것입니다.

간단한 링크에서

<Link className={this.getClass(this.props.type)} to={`${url}`} title={name}>{name}</Link>

다음과 같이 material ui 버튼을 생성하려고 했습니다.

<Link className={this.getClass(this.props.type)} to={`${url}`} title={name}>
  <FlatButton label={name} />
</Link>

하지만 다음과 같은 오류가 발생하여 Javascript가 중단되었습니다.

불변? 4599:38검출되지 않은 불변성 위반: addComponentAsRefTo(...): ReactOwner만 참조를 가질 수 있습니다.컴포넌트 내부에 생성되지 않은 컴포넌트에 참조를 추가할 수 있습니다.render또는 여러 개의 React 복사본이 로드되어 있습니다(https://gist.github.com/jimfb/4faa6cbfb1ef476bd105) 참조).

당신은 이 상황을 어떻게 대처해야 하는지 알고 있나요?미리 감사드리며 추가 정보가 필요하시면 연락주세요.

새로운 버전에서는 다음과 같은 작업을 수행할 수 있습니다.

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

// ... some code

render(){
    return (
        <Button component={Link} to={'/my_route'}>My button</Button>
    );
}

이 스레드나 이 질문을 보세요.

이것으로 충분합니다.

<FlatButton label="Details" 
            containerElement={<Link to="/coder-details" />} 
            linkButton={true} />

https://github.com/callemall/material-ui/issues/850 를 참조해 주세요.

<Button
          size="large"
          color="primary"
          onClick={() => {}}
          variant="outlined"
          component={RouterLink}
          to={{
            pathname: `enter your path name`,
          }}
        >
          Click Here
        </Button>

타이프 스크립트를 사용하는 경우는, 다음과 같이 시험할 수 있습니다.

import { NavLink as RouterLink } from "react-router-dom";
import {
  Button,
  Collapse,
  ListItem,
  makeStyles,
  ListItemIcon,
  ListItemText,
} from "@material-ui/core";

type NavItemProps = {
  className?: string;
  depth: number;
  href?: string;
  icon?: any;
  info?: any;
  open?: boolean;
  title: string;
};

const NavItem: React.SFC<NavItemProps> = ({

const CustomLink = React.forwardRef((props: any, ref: any) => (
    <NavLink
      {...props}
      style={style}
      to={href}
      exact
      ref={ref}
      activeClassName={classes.active}
    />
  ));
  return (
    <ListItem
      className={clsx(classes.buttonLeaf, `depth-${depth}`)}
      disableGutters
      style={style}
      key={title}
      button
      component={CustomLink}
      {...rest}
    >
      <ListItemIcon>
        {Icon && <Icon className={classes.icon} size="20" />}
      </ListItemIcon>
      <ListItemText primary={title} className={classes.title} />
    </ListItem>
  );
})

언급URL : https://stackoverflow.com/questions/38187833/how-to-combine-reactjs-router-link-and-material-ui-components-like-a-button