/ / Owijanie routera reagującego Link w przycisku html - html, reactjs, button, hiperlink, router

Zawijanie łącza routera reagowania w przycisku html - html, reactjs, przycisk, hiperlink, router

Korzystanie z sugerowanej metody: Oto wynik: link w przycisku, Kod pomiędzy wierszami komentarza

Zastanawiałem się, czy istnieje sposób na owijanie Link element z "react-router" w HTML button tagowanie za pomocą reagowania.

Obecnie mam Link komponentów do nawigacji po stronach w mojej aplikacji, ale chciałbym zamapować tę funkcję na moje przyciski HTML.

wprowadź opis obrazu tutaj wprowadź opis obrazu tutaj

Odpowiedzi:

3 dla odpowiedzi № 1

Tak.

Możesz zrobić coś takiego:

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

a następnie użyć <WrappedLink /> zamiast <Link />.


40 dla odpowiedzi nr 2

Wykonuj owijanie w odwrotny sposób, a otrzymasz oryginalny przycisk z dołączonym łączem. Nie są wymagane żadne zmiany CSS.

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

Tutaj przycisk to przycisk HTML. Ma również zastosowanie do komponentów importowanych z bibliotek stron trzecich, takich jak Semantic-UI-React.

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

18 dla odpowiedzi nr 3

Zagnieżdżanie html button w React Router Link komponent (lub vice versa) działa ... ale to jest hack ... i dostajesz html, którego nikt nigdy nie napisze:

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

Może to prowadzić do problemów z układem / stylem, ponieważ przyciski nie są zwykle umieszczane w łączach.

To, czego naprawdę chcesz w swoim html, to tylko button etykietka:

<button>label text</button>

Oto właściwy sposób na uzyskanie przycisku działającego jak React Router Link składnik…

Użyj React Routera withRouter HOC, aby przekazać te rekwizyty do twojego komponentu:

  • history
  • location
  • match
  • staticContext

LinkButton składnik

Tutaj jest LinkButton komponent do skopiowania /makaron:

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

Następnie zaimportuj komponent:

import LinkButton from "/components/LinkButton"

Użyj komponentu:

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

Jeśli potrzebujesz metody onClick:

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

14 dla odpowiedzi nr 4

Dlaczego nie po prostu ozdobić tag link z tym samym css co przycisk.

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


1 dla odpowiedzi nr 5

Używam routera i <Button />. Nie <Link />

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