it-swarm.com.de

Umwickeln eines Reakt-Router-Links in eine HTML-Schaltfläche

Verwenden der vorgeschlagenen Methode: Dies ist das Ergebnis: Ein Link in der Schaltfläche , Code zwischen Kommentarzeilen

Ich habe mich gefragt, ob es eine Möglichkeit gibt, ein Link -Element aus 'react-router' in einen HTML-button-Tag mit rea zu umschließen.

Ich habe derzeit Link-Komponenten, um durch die Seiten in meiner App zu navigieren, aber ich möchte diese Funktionalität meinen HTML-Schaltflächen zuordnen.

 enter image description here  enter image description here

45
Jose Rivera

Ja.

Sie können so etwas tun:

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

und dann <WrappedLink /> anstelle von <Link />.

2

Wickeln Sie in umgekehrter Reihenfolge und Sie erhalten die ursprüngliche Schaltfläche mit dem angebrachten Link. Keine CSS-Änderungen erforderlich.

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

Hier ist der Button HTML. Es ist auch auf Komponenten anwendbar, die aus Bibliotheken von Drittanbietern wie Semantic-UI-React importiert werden. 

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

LinkButton Komponente - eine Lösung für React Router v4

Das Verschachteln einer html button in einer React Router Link-Komponente (oder umgekehrt) funktioniert… aber dies ist ein Hack… und Sie erhalten eine html-Verschachtelung, die niemand schreiben sollte:

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

Dies kann zu Layout-/Stilproblemen führen, da Schaltflächen normalerweise nicht in Links platziert werden.

Was Sie wirklich in Ihrer HTML-Datei wollen, ist nur ein button-Tag:

<button>label text</button>

So erhalten Sie eine Schaltfläche, die wie die Link-Komponente von React Router funktioniert…

Verwenden Sie das withRouter HOC von React Router, um diese Requisiten an Ihre Komponente zu übergeben:

  • history
  • location
  • match
  • staticContext

LinkButton-Komponente

Hier ist eine LinkButton-Komponente zum Kopieren von/pasta:

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

Dann importieren Sie die Komponente:

import LinkButton from '/components/LinkButton'

Verwenden Sie die Komponente:

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

Wenn Sie eine onClick-Methode benötigen:

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

Warum nicht einfach Link-Tag mit dem gleichen CSS wie eine Schaltfläche dekorieren? 

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

18
Chase James

Ich verwende Router und <Button />. Nein <Link />

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

Für alle, die eine Lösung mit React 16.8 + (Hooks) und React Router 5 suchen:

Sie können die Route mithilfe einer Schaltfläche mit dem folgenden Code ändern:

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

React Router bietet einige Requisiten für Ihre Komponenten, einschließlich der Push () - Funktion für history, die ziemlich genau wie der <Link to = '- Pfad funktioniert '> Element.

Sie müssen Ihre Komponenten nicht mit der übergeordneten Komponente "withRouter" umwickeln, um Zugriff auf diese Requisiten zu erhalten.

1
Paulo Levy

Viele der Lösungen haben sich darauf konzentriert, die Dinge zu komplizieren.

Die Verwendung von withRouter ist eine sehr lange Lösung für etwas so Einfaches wie eine Schaltfläche, die mit einer anderen Stelle in der App verknüpft ist.

Wenn Sie S.P.A. Die einfachste Antwort, die ich gefunden habe, ist die Verwendung des entsprechenden Klassennamens der Schaltfläche.

Auf diese Weise wird sichergestellt, dass Sie den gemeinsamen Status/Kontext beibehalten, ohne die gesamte App erneut zu laden

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>
0
Acts7Seven

Wenn Sie react-router-dom und material-ui verwenden, können Sie ...

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

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

Sie können mehr hier lesen.

0
Inam Ul Huq

Mit gestalteten Komponenten kann dies leicht erreicht werden

Zuerst einen gestalteten Button entwerfen

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

check styled komponente home für mehr

0
Obed