Material-ui: react-routerからのリンクでラップされたボタンはSafariでは機能しません

@mariuskLinkコンポーネントをreact-routerからButtonコンポーネントにどのように追加したのか教えてください。 たとえば、次のようなことをすると、機能しません。

let editLink = <Link to="editTopic"/>;
<IconButton
    linkButton={true}
    onTouchTap={editLink}
    tooltip="Edit forum">
    <i className="material-icons">edit</i>
</IconButton>

linkButton={true}を追加する場合、ルートをhref要素に追加する必要があることに気付きましたが、react routerLinkはデフォルトでアンカータグを生成します。

実際のコードは次のとおりです。

 <Link to="/login"><FlatButton onTouchTap={this.clickHandler}>{l.l('no', 'Sign in')}</FlatButton></Link>

onTouchTapハンドラーがないと、Chromeでは機能しますがSafariでは機能しません。 明示的なハンドラー（これもreact-routerのtransitionTo(...)呼び出します）を使用すると、Safariでも機能します。

これは、FlatButtonが<button />要素を生成し、 <a /> <Link />が<a />要素を生成すると私が信じているためである可能性があります。 したがって、次のようになります。

<a><button /></a>

私が考えることができる1つの解決策は、ユーザーがコンテナ要素をカスタマイズできるようにする要素小道具を受け入れるように拡張ボタンを変更することです。 したがって、次のことができるようになります。

<FlatButton containerElement={<Link to="/login"/>} />

あなたが正しい; 要素内のボタンは無効なhtml5です。 別の可能な解決策は、ボタンスタイルをa要素（ buttonに加えて）で使用できるようにしてから、 className単純なスタイルにすることです。

実際に＃846を使用すると、次のことができるようになります。

<FlatButton>
  <Link to="/login/" />
</FlatButton>

＃846をテストしました。 スタイリングが壊れ（ボタンのテキストが白地に白）、リンクがアクティブではありません（機能しません）。 これが私がテストした実際のコードです：

<FlatButton><Link to="/login">{l.l('no', 'Sign in')}</Link></FlatButton>

色の問題（私自身のスタイリングが原因でした）、およびリンクがまだ機能しないという事実に加えて、フォーカスの問題もあります。 埋め込まれたaリンクにカーソルを合わせると、ボタン全体ではなく、リンク部分のみが強調表示されます。

@mariuskあなたは今これを行うことができるはずです：

<FlatButton
  containerElement={<Link to="/login" />}
  linkButton={true}
  label={l.l('no', 'Sign in')}/>

それは見た目も機能も完璧です、ありがとう、素晴らしい仕事です！

これに切り替えると、EventEmitterのメモリリーク警告が表示されます。 正しく削除されていないのは、 <Link>のクリックハンドラーなのか、 <EnhancedButton>のクリックハンドラーなのかわかりません。 たぶん<Link>が正しくアンマウントされていませんか？

linkButton={true}なくても動作しているようですよね？ ボタンがある場合LinkについてcontainerElementそれがになっている<a>の要素ではなく、 <button> ？

@ hai-cea nice、thx！
@antoinerousseauはい、 <a>に変わり、1つのスタイルを壊しました...元々 text-align: center設定されていたテキストが左に変更されました..現在は<a>要素になっています

containerElementは文書化されていません:(

この設定（例： RaisedButton width containerElement={<Link to="/register>}にCSSの問題があります。波及効果が適切に発生していません。実際には発生していますが、遅延が非常に大きいため、ほとんど表示されません（私がそのようなボタンを長くタップします）。v0.15.4を使用しています。

それをスピードアップする方法のヒントはありますか？

もう動作しません

警告：タグの不明な小道具linkButton 。

@wzupはlinkButton={true}削除するだけです

@wzup linkBut​​ton propを使用せずにこのようなコードを作成すると、機能するはずです。

<FlatButton
  containerElement={<Link to="/login" />}
/>

@ hai-cea、
こんにちは、

ボタンクリック後にナビゲートしたら、上記のコードでログインページの関数[モーダル関数など]をポップアップさせるにはどうすればよいですか？

バンプを許してください、しかし以下はそれでも0.17で警告を生成します：

<RaisedButton
      label="Sign In"
      containerElement={<Link to="/login" />}
/>

以下を生成します。

警告：タグの不明な小道具onTouchTap 。 詳細については、 https：//fb.me/react-unknown-propを参照してください。

同じ問題があったので、自分に合った再利用可能なコンポーネントを作成しました。

import React from 'react';
import {Component, PropTypes} from 'react';
import FlatButton from 'material-ui/FlatButton';

export default class FlatLinkButton extends Component {

    static propTypes = {
        ...FlatButton.propTypes,
        to: PropTypes.string.isRequired,
        link: PropTypes.func.isRequired,
        label: PropTypes.node.isRequired,
    };

    render() {
        const style = Object.assign({
            color: 'white',
            marginTop: '7px'
        }, this.props.style);

        const props = {
            ...this.props,
            style,
        };

        delete props.to;
        delete props.link;

        const Link = this.props.link;

        return (
            <Link to={this.props.to}>
                <FlatButton {...props}/>
            </Link>
        );
    }
}

使用法：

import {Link} from 'react-router';
import FlatLinkButton from './FlatLinkButton';

<FlatLinkButton to="/login" link={Link} label="Login"/>

@ MatthewEdge ＃4670で問題が解決するはずです

Material UI v1.0.0-alpha20では、これは私には機能しないようです。
<Button color="contrast" containerElement={<Link to="/login" />} linkButton={true} > Login </Button>

やあ、

同じ問題、プロトタイピングにv1.0.0-alpha21を使用して、 containerElementというメッセージが表示されたのは不明です。 そのため、プロパティが削除されたように見え、私はこの解決策に行き着きました：

<Button raised dense color="primary" onClick={() => this.props.history.push('/project/4711')}>
  <i className="fa fa-search fa-on-button" aria-hidden="true" />Search
</Button>

@HerrVoennchenと最新バージョンv1.0.0-beta.3を使用すると、次のことができるようになります。

const LinkWrapper = ({ ...props }) => (
  <Link {...props} />
)

そして、ラッパーをコンポーネントとして使用します

<Button to={`/project/${id}`} component={LinkWrapper}>Go</Button>

ポインタ@HiroAgustinをありがとう。 これはv1.0.0-beta.3です：

<Button
  color="primary"
  to={`/projects/${project.id}`}
  component={props => <Link {...props}/>}
>View</Button>

@HiroAgustinと@hubgitのソリューションを使用した1.0.0-beta.6 、警告が表示されます。

警告：Material-UI：コンポーネントプロパティにクラスを指定してください。
キーボードフォーカスロジックが正しく機能するには、参照が必要です。

助言がありますか？

@mht私にとっては、中括弧を削除したときに機能しました。

<Button component={Link} to="/customers"> Customers </Button>

@limakayoしかし、動的にリンクを作成したい場合はどうしますか？

@mht良い質問です。中かっこでテストしましたが、うまくいきました。理由はわかりません。

誰もが追加する方法を知っていますAppBar？のタイトルに、「旅行代理店」のタイトルにリンクを追加できるようにする必要があります

<AppBar title={"Travel Agency"} iconElementRight={ <div> <Link to="/customers" className="navbar"><FlatButton label="Customers" /></Link> <Link to="/tours" className="navbar"><FlatButton label="Tours" /></Link> </div> } />

このようにv1-betaで使用できます

<Button
  component={({...props}) => <Link to='/path' {...props} />}
>Path</Button>

私のように誰かが低レベルでカスタマイズする必要がある場合、material-uiはまだ古いスタイルのuiフレームワークに属していると思います。そこでは、見つけたすべてのボタンスタイルを見つけることができないか、単純なスタイルが多すぎます。 'styled-components'は、css、saasなどについてこれ以上必要とせず、純粋なコンポーネントに反応するだけです。バグがある場合にどこでどのように変更するかを理解しようとして、多くの時間、日、時間を失いました。将来のリリース..

@palaniichukdmytroソリューションに感謝しますが、BottomNavigationActionのリップルスタイリングを壊します

これは、material-uiボタンで機能しました。
`` `
'react'からReactをインポートします
'@ material-ui / core / Button'からボタンをインポートします
import {Link} from'react-router-dom '

const SubmitButton =（）=>
type = "submit"
全角形
Variant = "contained"
color = "primary"
component = {リンク}
to = "/ form"
>>
フォームを送信

以下のコードでリンクを使用してボタンをレンダリングしようとしましたが、ビューに何もレンダリングされません。

<Button
  component={() => (
    <Link
      to={{
        pathname: 'hello-there',
        state: {
          hello: 'HELLO THERE!',
        },
      }}
    />
  )}
  size="small"
  variant="contained"
  color="primary"
  fullWidth={true}
>
  HELLO BUTTON
</Button>

他に、material-uiを使用して小道具を次のルートに渡すにはどうすればよいですか？

コンポーネント= {（）=>（
to = {{
パス名： 'こんにちは-そこに'、
州： {
こんにちは： 'HELLO THERE！'、
}、
}}
/>
）}
size = "small"
Variant = "contained"
color = "primary"
fullWidth = {true}
>>
こんにちはボタン

私は同じ質問があります-これを解決したことがありますか？