History-Objekt im React Router

1. React Router Geschichte
2. React Router Historie für Redirects
3. history.push() in React Router V4

Die Navigation ist ein wesentlicher Bestandteil jeder modernen Anwendung. JavaScript-basierte Frameworks verlassen sich normalerweise auf das Standard-History-Objekt als Grundlage für ihre verschiedenen Navigationslösungen. Dieses Objekt ist als Eigenschaft des Window-Objekts des DOM verfügbar.

Bei der Entwicklung von Anwendungen in React können Entwickler die React Router-Bibliothek verwenden. Es bietet alle Navigationsfunktionalitäten, einschließlich eines history Paket, einer verbesserten Version der Browser-History-Schnittstelle. Das history-Objekt von React Router enthält viele Eigenschaften und Methoden, mit denen wir die Navigation konfigurieren können, z. B. action, location, .push(), oder .replace(). In den folgenden Abschnitten werden wir uns ansehen, wie man diese Eigenschaften und Methoden am besten nutzt, um die wichtigsten Navigationsanforderungen zu erfüllen.

React Router Geschichte

Das history Paket (oder kurz history) ist das Schlüsselwerkzeug, das zum Verwalten des Sitzungsverlaufs im JS erforderlich ist. Wie bereits erwähnt, enthält es viele Methoden, die alle auf ihre Weise nützlich sind. Dennoch ist die Methode history.push() wohl die wichtigste und wird im Mittelpunkt unseres Leitfadens stehen.

Verlaufsstapel

Browser verfolgen verschiedene URLs, die von Benutzern besucht werden. Dieser Sitzungsverlauf wird als Verlaufsstapel bezeichnet und ist erforderlich, damit die Zurück- oder Vorwärts-Schaltflächen des Browsers funktionieren.

Verlaufsobjekte haben Eigenschaften und Methoden, die sich auf einen Verlaufsstapel auswirken können. Zum Beispiel ersetzt die Methode .replace() den neuesten Pfad auf dem History-Stack. Die Eigenschaft .length gibt uns die Anzahl der Einträge im Stack an.

Die Methode .push() ist wahrscheinlich die wichtigste und am weitesten verbreitete Methode. Entwickler verwenden es, um einen Eintrag in den Stack zu verschieben und Benutzer auf eine andere Seite umzuleiten. Diese Methode ist unerlässlich, und wir werden sie in späteren Teilen des Handbuchs ausführlich besprechen.

location

Das Location-Objekt zeigt die Informationen zum aktuellen (und manchmal vergangenen) Pfadnamen der App an. React Router stellt dieses Objekt mehrfach zur Verfügung. Beispielsweise kann in der Komponente Route als Eigenschaft des Objekts props darauf zugegriffen werden. Erfahren Sie mehr auf dem offiziellen React Router Dokumentation.

Das Objekt history hat auch die Eigenschaft location. Da das Objekt history jedoch veränderbar ist, wird die Verwendung des Wertes der Eigenschaft location nicht empfohlen. Stattdessen können Sie auf den location über die props von <Route> zugreifen. Auf diese Weise können Sie sicher sein, dass Sie auf die richtigen location-Informationen zugreifen.

React Router Historie für Redirects

Beim Entwickeln einer Anwendung müssen Sie häufig den Pfad des Benutzers ändern, nachdem dieser eine Aktion ausgeführt hat. Dazu müssen Sie einen Event-Handler einrichten und mit der Methode .push() auf einen bestimmten Pfadnamen umleiten.

history.push() in React Router V5

Seit der Einführung von Haken sind Funktionskomponenten viel nützlicher geworden. Mit der Veröffentlichung von v5 hat react-router-dom auch begonnen, einen useHistory()-Hook bereitzustellen, um einfacher auf History-Objekte zuzugreifen. Schauen wir uns ein praktisches Beispiel an:

import { useHistory } from "react-router-dom";
function Homepage() {
  let historyObj = useHistory();
  function handleClick() {
    historyObj.push("/");
  }
  return (
    <div>
    ...
    <button onClick={() => handleClick()}>
      Go to Homepage
    </button>
    ...
    </div>
  );
}

In diesem Beispiel haben wir eine einfache Homepage-Komponente. Zuerst importieren wir den Hook useHistory aus dem Paket react-router-dom. Sie müssen Version 5 von react-router-dom (oder höher) installieren, damit dies funktioniert. Der Hook gibt das history-Objekt der Komponente zurück, das in der Variablen historyObj gespeichert ist.

Wir können die oben erwähnte Methode .push(string) in der Handler-Funktion verwenden, die ein String-Argument akzeptiert. Es schiebt die Zeichenkette in den Verlaufsstapel und führt den Benutzer zum angegebenen Pfad.

history.push() in React Router V4

Version 4 von React Router enthält keinen useHistory-Hook, also müssen Sie das history-Objekt über props weitergeben. Dies ist auch die einzige Möglichkeit, auf die history in Klassenkomponenten zuzugreifen, die nicht mit Hooks kompatibel sind.

Sie können zu einem anderen Pfad navigieren, indem Sie eine Methode .push() in der Handler-Funktion verwenden. Schauen wir uns dieses Beispiel an:

function handleClick() {
  this.props.history.push('/')
}

Um über props auf das Objekt history zuzugreifen, müssen Sie sicherstellen, dass Ihre Komponente darauf zugreifen kann. Dazu gibt es zwei Möglichkeiten.

1. Verwenden Sie das Attribut component auf <Route>, um es mit einer bestimmten Komponente zu verknüpfen. Zum Beispiel:

<Route path="/" component={Homepage} />

In diesem Fall hat die Komponente Homepage über props Zugriff auf das Objekt history.

2. Verwenden Sie das Attribut render, um eine Funktion zu definieren. Geben Sie props an und verwenden Sie die folgende Syntax:

<Route path="/" render={(props) => <Homepage {...props} />}/>