web-dev-qa-db-ja.com

HTMLボタンでreact-routerリンクをラップする

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

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

私は現在、アプリ内のページをナビゲートするためのLinkコンポーネントを持っていますが、その機能を自分のHTMLボタンにマッピングしたいと思います。

enter image description hereenter image description here

htmlreactjsbuttonhyperlinkrouter
58
Jose Rivera

はい。

あなたはこのようなことをすることができます：

const WrappedLink = () => {
  return (
    <button>
      <Link style={{display: 'block', height: '100%'}} .... />
    </button>
  )
}

その後、<WrappedLink />の代わりに<Link />を使用します。

これはWebブラウザで表示されますが、次の点に注意してください。
⚠️ html button内にhtml aをネストする（またはその逆）ことは無効です

1
Raphael Rafatpanah

逆方向に折り返すと、リンクが添付された元のボタンが表示されます。 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>

これはWebブラウザで表示されますが、次の点に注意してください。
⚠️ html button内にhtml aをネストする（またはその逆）ことは無効です

95
Naren Yellavula

LinkButtonコンポーネント - React Router v4のためのソリューション

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

__️<button>と<a>の入れ子は、有効なHTMLではありません。 ⚠️

React RouterのbuttonコンポーネントにhtmlのLinkをネストすること（またはその逆）を示唆するここでの答えはすべて、意味のあるもの、アクセス可能なもの、または有効なhtmlというものではありません。

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

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

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

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

Html buttonタグだけが欲しいのなら…

<button>label text</button>

…そして、React RouterのLinkコンポーネントのように機能するボタンを取得する正しい方法は…

React Routerの withRouter HOCを使用して、これらのプロップをコンポーネントに渡します。

  • 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>
66
Beau Smith

ボタンと同じCSSでリンクタグを飾るだけでは不十分です。

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

私はRouterと<Button />を使います。いいえ<Link />

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

あなたが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>

もっと読むことができます ここ 。

2
Inam Ul Huq

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

まずスタイルボタンをデザインする

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>
);

詳細--- スタイル付きコンポーネントのホーム

2
Obed

解決策の多くは、物事を複雑にすることに焦点を当てています。

WithRouterを使用することは、App内の他の場所にリンクするボタンのように単純なものに対する非常に長い解決策です。

あなたがS.P.A.に行くつもりなら（単一ページのアプリケーション）、私が見つけた最も簡単な答えはボタンの同等の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>
0
Acts7Seven