React Router 5.1.0 verwendet useHistory, um die Seitensprungnavigation zu implementieren

In React Router v4 können Sie verwenden

1. withRouter-Komponente
2. Tags verwenden

1. Verwenden Sie die Komponente withRouter

Die Komponente withRouter fügt das Verlaufsobjekt als Eigenschaft der Komponente ein.

React von „react“ importieren
importiere { mit Router } von 'react-router-dom'
importiere { Button } von 'antd'

export const ButtonWithRouter = mitRouter(({ Verlauf }) => {
  console.log('Verlauf', Verlauf)
  zurückkehren (
    <Schaltfläche
      Typ = "Standard"
      beiKlick={() => { history.push('/neuer-Standort') }}
    >
      Klick mich!
    </Button>

  )
})

import { ButtonWithRouter } from './buttonWithRouter'

oder:

const ButtonWithRouter = (Eigenschaften) => {
  console.log('Requisiten', Requisiten)
  zurückkehren (
    <Schaltfläche
      Typ = "Standard"
      bei Klick={() => { props.history.location.push('/neuer-Standort') }}
    >
      Klick mich!
    </Button>

  )
}

Standardmäßig mit Router exportieren (ButtonWithRouter)

Importieren: import ButtonWithRouter from './buttonWithRouter'

2. Routen-Tags verwenden

Am Routeneinstieg

Die Routenkomponente wird nicht nur zum Abgleichen von Standorten verwendet. Sie können eine Route ohne Pfad rendern und sie entspricht immer dem aktuellen Standort. Die Route-Komponente übergibt dieselben Eigenschaften wie withRouter, sodass auf die Verlaufsmethoden über die Verlaufseigenschaften zugegriffen werden kann.

Also:

exportiere const ButtonWithRouter = () => (
  <Route render={({ Verlauf }) => {
    console.log('Verlauf', Verlauf)
    zurückkehren (
      <Schaltfläche
        Typ = "Schaltfläche"
        beiKlick={() => { history.push('/neuer-Standort') }}
      >
        Klick mich!
      </button>
    )
  }} />
) 

React Router 5.1.0 verwendet useHistory

Ab React Router v5.1.0 wurde der useHistory-Hook hinzugefügt. Wenn Sie React >16.8.0 verwenden, können Sie useHistory verwenden, um Seitensprünge zu erreichen

exportiere const ButtonWithRouter = () => {
  const history = useHistory();
  console.log('Verlauf', Verlauf)
  zurückkehren (
    <Schaltfläche
      Typ = "Schaltfläche"
      beiKlick={() => { history.push('/neuer-Standort') }}
    >
      Klick mich!
    </button>
  )
}

Dies ist das Ende dieses Artikels über die Implementierung der Seitensprungnavigation mit useHistory in React Router 5.1.0. Weitere relevante Inhalte zur Seitensprungnavigation mit useHistory von ReactRouter finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!