para - Envolviendo un enlace react-router en un botón html

como hacer enlaces con botones en html

Question

Uso del método sugerido: este es el resultado: un enlace en el botón , código entre líneas de comentario

Me preguntaba si hay una manera de envolver un elemento Link desde ''react-router'' en una etiqueta de button HTML usando react.

Actualmente tengo componentes de Link para navegar por las páginas de mi aplicación, pero me gustaría asignar esa funcionalidad a mis botones HTML.

Answer 1

Componente LinkButton : una solución para React Router v4

Primero, una nota sobre muchas otras respuestas a esta pregunta.

⚠️ Anidar <button> y <a> no es html válido. ⚠️

Cualquier respuesta que sugiera anidar un button html en un componente React Router Link (o viceversa) se mostrará en un navegador web, pero no es html semántico, accesible o válido:

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

☝ Haga clic para validar este marcado con validator.w3.org ☝

Esto puede conducir a problemas de diseño / estilo, ya que los botones no suelen colocarse dentro de los enlaces.

Usando una etiqueta html <button> con el componente React Router <Link> .

Si solo quieres una etiqueta de button html ...

<button>label text</button>

... entonces, esta es la manera correcta de obtener un botón que funcione como el componente React Router''s Link ...

Use React Router''s con Router HOC para pasar estos accesorios a su componente:

• history
• location
• match
• staticContext

Componente LinkButton

Aquí hay un componente LinkButton para copiar / 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)

Luego importe el componente:

import LinkButton from ''/components/LinkButton''

Usa el componente:

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

Si necesita un método onClick:

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

Answer 2

¿Por qué no simplemente decorar la etiqueta de enlace con el mismo CSS que un botón?

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

Answer 3

Con componentes diseñados, esto se puede lograr fácilmente

Primero diseñe un botón con estilo

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

verifique el hogar del componente con estilo para más

Answer 4

Envuelva de forma inversa y obtendrá el botón original con el enlace adjunto. No se requieren cambios de CSS.

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

Aquí el botón es el botón HTML. También es aplicable a los componentes importados de bibliotecas de terceros como Semantic-UI-React .

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

Si bien esto se procesará en un navegador web, tenga en cuenta que:
⚠️ Anidar un button html en un html a (o viceversa) no es html válido

Answer 5

Muchas de las soluciones se han centrado en complicar las cosas.

Usar withRouter es una solución realmente larga para algo tan simple como un botón que se vincula a otro lugar de la aplicación.

Si va a utilizar SPA (aplicación de una sola página), la respuesta más fácil que he encontrado es usar el className equivalente del botón.

Esto garantiza que mantenga un estado / contexto compartido sin volver a cargar toda la aplicación como se hace con

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>

Answer 6

Para cualquiera que busque una solución con React 16.8+ (ganchos) y React Router 5:

Puede cambiar la ruta usando un botón con el siguiente código:

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

React Router proporciona algunos accesorios a sus componentes, incluida la función push () en el historial que funciona de manera muy similar al elemento <Link to = ''path''>.

No necesita envolver sus componentes con el Componente de orden superior "withRouter" para obtener acceso a esos accesorios.

Answer 7

Si está utilizando react-router-dom y material-ui , puede usar ...

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

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

Puedes leer más here .

Answer 8

Yo uso Router y <Botón />. No <Enlace />

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

Answer 9

⚠️ No, anidar un button html en un html a (o viceversa) no es html válido