Envelopper un lien de réaction-routeur dans un bouton html

Question

À l'aide de méthode suggérée: C'est le résultat: Un lien dans le bouton, De Code entre les lignes de commentaire

Je me demandais si il existe un moyen pour envelopper un Link élément d' 'react-router' HTML button balise à l'aide de réagir.

J'ai actuellement Link des composants de parcourir les pages de mon application, mais je tiens à la carte de la fonctionnalité mes boutons HTML.

Answer 1

Ne enroulant dans le sens inverse et vous obtenez le bouton d'origine avec le Lien ci-joint. Pas de CSS changements requis.

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

Voici le bouton est le bouton HTML. Il est également applicable aux composants importés du tiers des bibliothèques comme la Sémantique de l'INTERFACE utilisateur de Réagir.

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

Tout cela sera rendu dans un navigateur web, méfiez-vous que:
⚠️De nidification html button html a (ou vice-versa) n'est pas valide html

Answer 2

LinkButton composant: une solution pour Réagir Routeur v4

Tout d'abord, une remarque à propos de beaucoup d'autres réponses à cette question.

⚠️ De nidification <button> et <a> n'est pas valide html. ⚠️

Aucune réponse ici, qui suggère de nidification html button dans une Réagir Routeur Link composant (ou vice-versa) va afficher dans un navigateur web, mais il n'est pas sémantique, accessible, ou de la validité html:

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

☝Cliquez pour valider cette balise avec validator.w3.org ☝

Cela peut conduire à la mise en page/style de questions que les boutons ne sont pas généralement placés à l'intérieur des liens.

---

À l'aide d'un code html <button> balise de Réagir Routeur <Link> de la composante.

Si vous voulez seulement un html button balise...

<button>label text</button>

...alors, voici le bon moyen de faire un bouton qui fonctionne comme Réagir Routeur Link de la composante...

L'utilisation de Réagir Routeur withRouter HOC pour passer de ces accessoires de votre composant:

• history
• location
• match
• staticContext

---

LinkButton de la composante

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>

Answer 3

Pourquoi ne pas simplement décorer la balise de lien avec les mêmes CSS comme un bouton.

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

Answer 4

J'utilise le routeur et <Button />. Non <Lien />

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

Answer 5

Oui.

Vous pouvez faire quelque chose comme ceci:

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

et puis utiliser <WrappedLink /> au lieu de <Link />.

Tout cela sera rendu dans un navigateur web, méfiez-vous que:
⚠️De nidification html button html a (ou vice-versa) n'est pas valide html