web-dev-qa-db-ja.com

Material-UI RaisedButtonリンクを外部URLにリンクしようとしましたが成功しませんか？

タイトル状態での質問として。

React、react-router、およびmaterial-uiを1つの場所で使用して、Cardコンポーネントのアクションボタンを外部URLにリンクしたいのですが、成功しません。

現在window.openを使用するイベントハンドラーを追加することを考えていますが、よりスマートな方法である必要がありますか？

コードがこのようになる前に、解決策を見つけました。

<CardActions>
   <RaisedButton
       href={this.props.url}
       label="OK"
   />
</CardActions>

解決策は非常に簡単でした：

<CardActions>
   <a href={this.props.url} target="_blank">
     <RaisedButton
        label="OK"
     />
   </a>
</CardActions>
reactjsreact-routermaterial-ui
17
HenrikGr

React-routerリンクまたはmaterial-uiボタンに外部リンクを追加する場合は、外部URLに「http：//」（またはhttps：//）を追加することが重要です。リンクはhttpを追加しないと機能しません。

不正なコード -

<Link target="_blank" to='www.google.com'>Google</Link>

次にリダイレクトリンクが

localhost:3000/www.google.com

正しいコード-

React-router Linkでリダイレクトしたい場合、これはサンプルコードです-

<Link target="_blank" to='http://www.google.com'>Google</Link>

Material-uiボタンでリダイレクトしたい場合、これはサンプルコードです-

<Button target="_blank" href="http://www.google.com/">Google</Button>
19
Arpit

ラップできます<RaisedButton />から<Link />内部ルーティング用のコンポーネント。

<Link to={this.props.cardItem.resourceUrl}>
  <RaisedButton label="Ok" />
</Link>

そして、単純な<a>外部タグ：

<a href={this.props.cardItem.resourceUrl}>
  <RaisedButton label="Ok" />
</a>
10
Alexandr Lazarev