faire l'emballage dans le sens inverse et vous obtenez le bouton original avec le lien attaché. Aucun changement CSS requis.

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

voici le bouton HTML. Il est également applicable aux composants importés de bibliothèques tierces comme la Sémantique de l'INTERFACE utilisateur-Réagir.

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

LinkButton composant - une solution pour Réagir Routeur v4

emboîter un html button dans un routeur React Link composant (ou vice-versa) fonctionne... mais c'est un hack... et vous obtenez html ce qui ne devrait jamais écrire:

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

cela peut entraîner des problèmes de mise en page ou de style, car les boutons ne sont généralement pas placés à l'intérieur des liens.

ce que vous voulez vraiment dans votre html est seulement un button balise:

<button>label text</button>

Voici la bonne façon d'obtenir un bouton cela fonctionne comme le routeur de réagir Link composant...

utilisez le routeur React withRouter HOC pour passer de ces accessoires de votre composant:

• history
• location
• match
• staticContext

LinkButton composant

Voici un LinkButton composant pour vous de copier/pâtes:

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

Puis importer le composant:

import LinkButton from '/components/LinkButton'

Utiliser le composant:

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

Si vous avez besoin d'une méthode onClick:

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

pourquoi ne pas simplement décorer l'étiquette de lien avec le même css qu'un bouton.

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

Button1

J'utilise Router et < Button/>. Aucun < /Lien>

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