para - Envolviendo un enlace react-router en un botón html
como hacer enlaces con botones en html (9)
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>
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.
¿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>
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
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
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>
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.
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 .
Yo uso Router y <Botón />. No <Enlace />
<Button onClick={()=> {this.props.history.replace(''/mypage'')}}>
HERE
</Button>