☰

react-router リンクを HTML ボタンにラップする 質問する

tag-icon • tag-icon html reactjs button hyperlink router
react-router リンクを HTML ボタンにラップする 質問する

推奨される方法を使用する:結果は次のようになります: ボタン内のリンク、コメント行間のコード

react を使用してHTML タグ内Linkの要素をラップする方法があるかどうか疑問に思っていました。'react-router'button

Link現在、アプリ内のページを移動するためのコンポーネントがありますが、その機能を HTML ボタンにマップしたいと考えています。

ここに画像の説明を入力してください ここに画像の説明を入力してください

ベストアンサー1

これはウェブブラウザでレンダリングされますが、次の点に注意してください:
⚠️HTML をbuttonHTML 内にネストするa(またはその逆)有効なHTMLではありません⚠️. スクリーン リーダーに対して HTML のセマンティックを維持したい場合は、別の方法を使用します。

逆の方法でラッピングすると、リンクが添付された元のボタンが作成されます。CSS の変更は必要ありません。

 <Link to="/dashboard">
     <button type="button">
          Click Me!
     </button>
 </Link>

ここでのボタンはHTMLボタンです。サードパーティのライブラリからインポートされたコンポーネントにも適用できます。セマンティックUI-React。

 import { Button } from 'semantic-ui-react'
 ... 
 <Link to="/dashboard">
     <Button style={myStyle}>
        <p>Click Me!</p>
     </Button>
 </Link>

おすすめ記事