Gehen Sie mit React Router zur vorherigen Seite zurück

React ist heute die am häufigsten verwendete Front-End-Bibliothek. Wir können es nicht als Framework bezeichnen, da es keine Navigation und andere wesentliche Funktionen hat; Daher importieren React-Entwickler normalerweise externe Bibliotheken wie react-router, um Navigationsfunktionen zu implementieren.

Dieser Artikel soll Ihnen helfen, grundlegende Navigationsfunktionen in React zu implementieren, insbesondere, wie Sie React Router anweisen, zur vorherigen Seite zurückzukehren.

Gehen Sie mit React Router zur vorherigen Seite zurück

Jeder, der Erfahrung im Surfen im Internet hat, versteht, wie wichtig die Zurück-Funktion ist. Es ist eine gute UX-Praxis, eine Funktion in Ihrer React-App zu implementieren, mit der Ihre Benutzer zur vorherigen Seite oder URL zurücknavigieren können.

Geschichtsstapel

Internetbrowser zeichnen Ihre Aktionen auf. Der Verlaufsstapel ist eine Sammlung Ihrer Schritte, während Sie auf der Website navigieren.

History Stack ist ein Browser-Feature, aber die react-router-Bibliothek speichert diese Informationen auch im history-Objekt. Sie können mit diesem Objekt arbeiten, um Benutzern eine reibungslose Navigation in Ihrer Anwendung zu ermöglichen.

Zurück zur vorherigen Seite mit React Router v4 und v5

In den vorherigen Versionen der Bibliothek react-router haben wir den Hook useHistory() verwendet, um zu einer bestimmten Seite zu navigieren. Es bietet Zugriff auf die Instanz des Objekts history.

Sie können die Methoden .push(), .pop() und .replace() verwenden, um die URL nach Bedarf zu ändern. Die Instanz history hat eine goBack()-Methode, mit der wir zur vorherigen Seite navigieren können.

Schauen wir uns das Beispiel an:

function NavigateHome() {
  let history = useHistory();
  function handleClick() {
    history.push("/somePage");
  }
  function goBack() {
    history.goBack();
  }
    return (
    <div>
    <button onClick={handleClick}>
       Go to some page
    </button>
    <button onClick={goBack}>
       Go back
    </button>
    </div>

  );
}

Wenn in diesem Beispiel ein Benutzer auf die erste Schaltfläche klickt, führt react-router den Benutzer zu der URL, die als Argument an die push()-Methode übergeben wird. Wenn der Benutzer jedoch auf die zweite Schaltfläche klickt, wird er zur vorherigen Seite zurückgeleitet.

Zurück zur vorherigen Seite mit React Router v6

Die neueste Version der React-Router-Bibliothek unterstützt den useHistory()-Hook nicht mehr. Entwickler der Bibliothek empfehlen stattdessen den Hook useNavigate() zu verwenden.

Im Gegensatz zu history erfordert die navigate-API nicht die Verwendung von .push() und anderen JavaScript-Methoden. Es nimmt das Argument selbst.

Anstatt die Methode .goBack() zu verwenden, müssen Sie außerdem das Argument in die Instanz navigate ändern. Alles, was Sie tun müssen, ist, navigate mit -1 als Argument aufzurufen.

Das obige Beispiel kann mit React Router v6 umgeschrieben werden, das die navigate-API verwendet:

import { useNavigate, Link, BrowserRouter as Router } from "react-router-dom";
export default function App() {
  let navigate = useNavigate();
  let goToAnotherPage = () => {
    navigate("/another");
  };
  let goToSomePage = () => {
    navigate("/somepage");
  };
  let goBack = () => {
    navigate(-1);
  };
  return (
    <div className="App">
      <span
        onClick={goToAnotherPage}
        style={{ backgroundColor: "yellow", fontSize: 33, padding: 5 }}
      >
        Go To Another Page
      </span>
      <br />
      <span
        onClick={goToSomePage}
        style={{ backgroundColor: "yellow", fontSize: 33, padding: 5 }}
      >
        Go To Some Page
      </span>
      <br />
      <span
        onClick={goBack}
        style={{ backgroundColor: "lightblue", fontSize: 33, padding: 5 }}
      >
        Go Back
      </span>
    </div>
  );
}

In diesem Beispiel haben wir drei Schaltflächen. Die ersten beiden führen Benutzer zu einer bestimmten URL, und die dritte bringt sie zum vorherigen Ort zurück.

Wir haben dafür die API navigate verwendet; navigate ist eine Funktion, die die Ziel-URL als Argument akzeptiert. Wenn Sie als Argument -1 angeben, wird zur vorherigen Seite zurückgekehrt.

Sie können mit dem Code auf CodeSandbox spielen.