Si bien esto se representará en un navegador web, tenga en cuenta que:
⚠️ Anidar un button html en un html a (o viceversa) no es un html válido ⚠️. Si desea mantener su html semántico para los lectores de pantalla, use otro enfoque.

Realice el envoltorio al revés 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>

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 aquí 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 provocar 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 desea una etiqueta de button html...

 <button>label text</button>

…entonces, esta es la forma correcta de obtener un botón que funcione como el componente Link de React Router…

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

• history
• location
• match
• staticContext

Componente LinkButton

Aquí hay un componente LinkButton para que copie / pegue :

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

Utilice 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>

Actualización: si está buscando otra opción divertida disponible después de que se escribió lo anterior, consulte este enlace useRouter .

¿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>