提案された方法を使用する： これが結果です：ボタンでリンク、 コードのコメント行の間に

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

現在Link、アプリのページをナビゲートするコンポーネントがありますが、その機能をHTMLボタンにマップしたいと思います。

これはWebブラウザーでレンダリングされますが、次の
点に注意してください。⚠️htmlにhtmlbuttonをネストするa（またはその逆）ことは有効なhtmlではありません⚠️。スクリーンリーダーに対してHTMLセマンティックを維持したい場合は、別のアプローチを使用してください。

逆にラッピングすると、リンクが付いた元のボタンが表示されます。CSSの変更は必要ありません。

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

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

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

LinkButton コンポーネント-ReactRouterv4のソリューション

まず、この質問に対する他の多くの回答についてのメモ。

⚠️ネスト<button>して<a>おり、有効なhtmlではありません。⚠️

buttonReact RouterLinkコンポーネントにhtmlをネストすること（またはその逆）を提案するここでの回答は、Webブラウザーでレンダリングされますが、セマンティック、アクセス可能、または有効なhtmlではありません。

<a stuff-here><button>label text</button></a>
<button><a stuff-here>label text</a></button>

☝クリックして、validator.w3.orgでこのマークアップを検証します☝

ボタンは通常リンク内に配置されないため、これはレイアウト/スタイルの問題につながる可能性があります。

<button>ReactRouter<Link>コンポーネントでhtmlタグを使用する。

htmlbuttonタグのみが必要な場合…

<button>label text</button>

…次に、ReactRouterのLinkコンポーネントのように機能するボタンを取得する正しい方法は次のとおりです…

ReactRouterのwithRouterHOCを使用して、これらの小道具をコンポーネントに渡します。

• history
• location
• match
• staticContext

LinkButton 成分

LinkButtonコピー/パスタするためのコンポーネントは次のとおりです。

// file: /components/LinkButton.jsx
import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

const LinkButton = (props) => {
  const {
    history,
    location,
    match,
    staticContext,
    to,
    onClick,
    // ⬆ filtering out props that `button` doesn’t know what to do with.
    ...rest
  } = props
  return (
    <button
      {...rest} // `children` is just another prop!
      onClick={(event) => {
        onClick && onClick(event)
        history.push(to)
      }}
    />
  )
}

LinkButton.propTypes = {
  to: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired
}

export default withRouter(LinkButton)

次に、コンポーネントをインポートします。

import LinkButton from '/components/LinkButton'

コンポーネントを使用します。

<LinkButton to='/path/to/page'>Push My Buttons!</LinkButton>

onClickメソッドが必要な場合：

<LinkButton
  to='/path/to/page'
  onClick={(event) => {
    console.log('custom event here!', event)
  }}
>Push My Buttons!</LinkButton>

更新：上記の記述後に利用可能になった別の楽しいオプションを探している場合は、このuseRouterフックを確認してください。

リンクタグをボタンと同じCSSで飾ってみませんか。

<Link 
 className="btn btn-pink"
 role="button"
 to="/"
 onClick={this.handleClick()}
> 
 Button1
</Link>

あなたが使用している場合react-router-domとmaterial-ui、あなたは使用することができます...

import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button';

<Button component={Link} to="/open-collective">
  Link
</Button>

あなたはここでもっと読むことができます。

react-routerv5.1.0以降はuseHistory フックを使用できます。

useHistoryフックは、あなたがナビゲートするために使用することが歴史のインスタンスにアクセスできます。

import React from 'react'
import { useHistory } from 'react-router'

export default function SomeComponent() {
  const { push } = useHistory()
  ...
  <button
    type="button"
    onClick={() => push('/some-link')}
  >
    Some link
  </button>
  ...
}

ルーターと<ボタン/>を使用しています。いいえ<リンク/>

<Button onClick={()=> {this.props.history.replace('/mypage')}}>
   HERE
</Button>

⚠️いいえ、htmlをhtmlbuttonにネストするa（またはその逆）ことは有効なhtmlではありません

React 16.8+（フック）とReact Router 5を使用したソリューションをお探しの方へ：

次のコードのボタンを使用してルートを変更できます。

<button onClick={() => props.history.push("path")}>

React Routerは、<Link to = 'path'>要素とほとんど同じように機能する履歴のpush（）関数など、コンポーネントにいくつかの小道具を提供します。

これらの小道具にアクセスするために、コンポーネントを高次コンポーネント「withRouter」でラップする必要はありません。

Reactルーターバージョン6のアップデート：

ここでのさまざまな答えは、react-routerの進化のタイムラインのようなものです🙂

react-router v6の最新のフックを使用して、これをuseNavigateフックで簡単に実行できるようになりました。

import { useNavigate } from 'react-router-dom'      

function MyLinkButton() {
  const navigate = useNavigate()
  return (
      <button onClick={() => navigate("/home")}>
        Go Home
      </button>
  );
}

スタイル付きコンポーネントを使用すると、これを簡単に実現できます

最初にスタイル付きボタンをデザインする

import styled from "styled-components";
import {Link} from "react-router-dom";

const Button = styled.button`
  background: white;
  color:red;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid red;
  border-radius: 3px;
`
render(
    <Button as={Link} to="/home"> Text Goes Here </Button>
);

詳細については、スタイル付きコンポーネントのホームを確認してください

ソリューションの多くは、物事を複雑にすることに焦点を当てています。

withRouterの使用は、アプリ内の別の場所にリンクするボタンのような単純なものに対する非常に長いソリューションです。

SPA（シングルページアプリケーション）を使用する場合、私が見つけた最も簡単な答えは、ボタンと同等のclassNameを使用することです。

これにより、アプリ全体をリロードすることなく、共有状態/コンテキストを維持できます。

import { NavLink } from 'react-router-dom'; // 14.6K (gzipped: 5.2 K)

// Where link.{something} is the imported data
<NavLink className={`bx--btn bx--btn--primary ${link.className}`} to={link.href} activeClassName={'active'}>
    {link.label}
</NavLink>

// Simplified version:
<NavLink className={'bx--btn bx--btn--primary'} to={'/myLocalPath'}>
    Button without using withRouter
</NavLink>