web-dev-qa-db-fra.com

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

Utilisation de la méthode suggérée: Voici le résultat: un lien dans le bouton , Code entre les lignes de commentaire

Je me demandais s’il existait un moyen d’envelopper un élément Link à partir de 'react-router' dans une balise HTML button en utilisant react.

J'ai actuellement des composants Link pour naviguer dans les pages de mon application, mais j'aimerais mapper cette fonctionnalité sur mes boutons HTML.

 enter image description here  enter image description here

htmlreactjsbuttonhyperlinkrouter
45
Jose Rivera

Oui.

Vous pouvez faire quelque chose comme ça:

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

puis utilisez <WrappedLink /> au lieu de <Link />.

2
Raphael Rafatpanah

Emballez en sens inverse et vous obtenez le bouton original avec le lien attaché. Aucune modification CSS requise.

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

Ici le bouton est le bouton HTML. Il est également applicable aux composants importés de bibliothèques tierces telles que Semantic-UI-React . 

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

LinkButton composant - une solution pour React Router v4

L'imbrication d'une variable HTML button dans un composant Link de React Router (ou inversement) fonctionne… mais c'est un hack… et vous obtenez une imbrication HTML que personne ne devrait écrire:

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

Cela peut entraîner des problèmes de mise en page/de style car les boutons ne sont généralement pas placés dans des liens.

Ce que vous voulez vraiment dans votre HTML n'est qu'une balise button:

<button>label text</button>

Voici le bon moyen d’obtenir un bouton qui fonctionne comme le composant Link de React Router…

Utilisez le fichier withRouter HOC de React Router pour transmettre ces accessoires à votre composant:

  • history
  • location
  • match
  • staticContext

LinkButton composant

Voici un composant LinkButton à copier/pasta:

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

Importez ensuite le composant:

import LinkButton from '/components/LinkButton'

Utilisez 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>
46
Beau Smith

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

18
Chase James

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

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

Pour ceux qui recherchent une solution utilisant React 16.8 + (crochets) et React Router 5:

Vous pouvez modifier l'itinéraire à l'aide d'un bouton portant le code suivant:

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

React Router fournit quelques accessoires pour vos composants, y compris la fonction Push () sur history qui fonctionne assez bien comme le chemin <Link to = ' '> élément.

Vous n'avez pas besoin d'encapsuler vos composants avec le composant d'ordre supérieur "withRouter" pour accéder à ces accessoires.

1
Paulo Levy

Beaucoup de solutions ont été concentrées sur la complication.

Utiliser withRouter est une solution très longue pour quelque chose d'aussi simple qu'un bouton qui renvoie à un autre endroit de l'application.

Si vous allez pour S.P.A. (application d'une seule page), la réponse la plus simple que j'ai trouvée consiste à utiliser avec l'équivalent className du bouton.

Cela garantit que vous maintenez un état/contexte partagé sans recharger toute votre application comme c'est le cas avec

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

Si vous utilisez react-router-dom et material-ui, vous pouvez utiliser ...

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

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

Vous pouvez en lire plus ici .

0
Inam Ul Huq

Avec des composants stylés, cela peut être facilement réalisé

Tout d'abord concevoir un bouton stylé

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

vérifier la maison stylée du composant pour plus

0
Obed