Pomocou navrhovanej metódy: Toto je výsledok: Odkaz na tlačidlo, Kód medzi komentármi

Zaujímalo by ma, či existuje spôsob, ako zabaliť Link prvok z "react-router" v HTML button značka pomocou reakcie.

V súčasnosti som Link komponenty na navigáciu stránok v mojej aplikácii, ale rád by som túto funkciu mapoval na moje HTML tlačidlá.

odpovede:

3 pre odpoveď č. 1

Áno.

Môžete urobiť niečo takéto:

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

a potom použite <WrappedLink /> namiesto <Link />.

---

40 pre odpoveď č. 2

Obalujte opačným spôsobom a dostanete originálne tlačidlo s pripojeným odkazom. Žiadne zmeny CSS nie sú potrebné.

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

Tu je tlačidlo HTML. To platí aj pre komponenty importované z knižníc tretích strán, napr Sémantický-UI-Reagovať.

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

---

18 pre odpoveď č. 3

Nesting html button v reakčnom smerovači Link komponent (alebo naopak) funguje ... ale toto je hack ... a dostanete html, ktorý by nikto nikdy nemal písať:

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

To môže viesť k problémom s rozložením / štýlom, pretože tlačidlá sa zvyčajne nenachádzajú vo vnútri odkazov.

To, čo naozaj chcete vo vašom html, je iba button tag:

<button>label text</button>

Tu je správny spôsob, ako dostať tlačidlo, ktoré funguje ako React Router Link zložka ...

Použite React Router withRouter HOC prejsť tieto rekvizity na vaše komponenty:

• history
• location
• match
• staticContext

---

LinkButton komponentov

Tu je a LinkButton komponent pre kopírovanie /cestoviny:

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

Potom importujte komponent:

import LinkButton from "/components/LinkButton"

Použite komponent:

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

Ak potrebujete metódu onClick:

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

---

14 pre odpoveď č. 4

Prečo nie len zdobiť značku odkazu s rovnakým css ako tlačidlo.

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

Button1

---

1 pre odpoveď č. 5

Používam Router a <Button />. Nie <Link />

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

---