2016-07-04 5 views
0

반응 라우터의 기능을 재료 UI 구성 요소와 결합 할 수있는 솔루션을 찾아야합니다.ReactJs 라우터 링크와 material-ui 구성 요소 (버튼과 같은)를 결합하는 방법은 무엇입니까?

예를 들어 라우터와 버튼이 있습니다. 제가 시도한 것은 그것들을 함께 섞어서 다시 스타일을 바꾸는 것입니다.

그래서 단순 링크

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

에서 나는 다음과 같은

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

같은 재료 UI 버튼을 만들려고하지만 다음과 같은 오류가 자바 스크립트는 불변

나누기 .js? 4599 : 38Uncaught Invariant Violation : addComponentAsRefTo (...) : ReactOwner만이 ref를 가질 수 있습니다. 구성 요소의 render 메소드에서 생성되지 않은 구성 요소에 참조를 추가하거나, React loaded (자세한 내용은 https://gist.github.com/jimfb/4faa6cbfb1ef476bd105) 사본을 여러 개 가질 수 있습니다.

이 상황을 어떻게 관리 할 생각이 있습니까? 사전에 감사하고 당신이 더 필요한 경우 정보 나 이것은 나를 위해 작동

+0

나는이 문제에 걸쳐 및 재료 UI와 함께 때로는 링크를 사용하여 한 참조 당신이 라우터의 browserHistory 반응해야 스타일을 깨고 수동으로 URL을 밀어 – Pachu

답변

1

을 알려 :

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

https://github.com/callemall/material-ui/issues/850

+0

훌륭한 작품! 그러나 버튼이 비활성화되었을 때 리디렉션을 어떻게 비활성화합니까? – JohnnyQ