web-dev-qa-db-ja.com

ReactJs Router Linkとmaterial-uiコンポーネント（ボタンのような）を組み合わせる方法は？

反応ルーターの機能とマテリアルUIコンポーネントを組み合わせることができるソリューションを見つける必要があります。

たとえば、私はこのシナリオを持っています：ルーターとボタン。私がやろうとしたことは、それらを混ぜ合わせ、スタイルを変更することです。

簡単なリンクから

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

以下のように素材UIボタンを作成してみました

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

しかし、私は次のエラーとJavaScriptの改行があります

invariant.js？4599：38Uncaught Invariant Violation：addComponentAsRefTo（...）：ReactOwnerのみが参照を持つことができます。コンポーネントのrenderメソッド内で作成されていないコンポーネントに参照を追加するか、Reactの複数のコピーが読み込まれています（詳細： https： //Gist.github.com/jimfb/4faa6cbfb1ef476bd105 ）。

この状況を管理する方法について何か考えがありますか？よろしくお願いします。詳細が必要な場合はお知らせください

javascriptreactjsreact-routerclient-sidematerial-ui
15
axel

これは私にとってはうまくいきます：

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

参照してください https://github.com/callemall/material-ui/issues/85

5
Jeff Ogata

新しいバージョンで行う方法は次のとおりです。

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

// ... some code

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

これを見てください thread またはこれ question

10
UselesssCat