Gelöst: Daten übergeben Navigieren Reagieren Router Dom

Das Hauptproblem beim Übergeben von Daten beim Navigieren mit React Router DOM besteht darin, dass die Daten in der URL-Abfragezeichenfolge übergeben werden müssen. Das bedeutet, dass alle vertraulichen Informationen vor der Weitergabe verschlüsselt werden müssen, da sie in der URL sichtbar sind. Wenn die Daten außerdem zu groß sind, können sie die maximale Länge einer URL überschreiten und Fehler verursachen. Wenn Sie schließlich React Router DOM verwenden, um zwischen Seiten innerhalb einer Anwendung zu navigieren, müssen Sie den Status auch manuell verwalten und Änderungen verfolgen, um sicherzustellen, dass alle Komponenten Zugriff auf dieselben Daten haben.

import { useHistory } from "react-router-dom";

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// Zeile 1: Diese Zeile importiert den useHistory-Hook aus der React-Router-Dom-Bibliothek.
// Zeile 3: Diese Zeile deklariert eine Konstante namens MyComponent, die eine Funktion ist, die JSX zurückgibt.
// Zeile 4: Diese Zeile deklariert eine Konstante namens history, die dem useHistory-Hook zugewiesen ist, der aus React-Router-Dom importiert wurde.
// Zeile 6: Diese Zeile deklariert eine Funktion namens handleClick, die einen Parameter, data, übernimmt.
// Zeile 7: Diese Zeile verwendet das History-Objekt, um eine neue Route mit dem Pfadnamen '/myroute' und den als Objekt übergebenen Zustandsdaten auf den Stack zu schieben.
// Zeilen 9 – 11: Diese Zeilen geben JSX zurück, das ein Button-Element mit einem onClick-Event-Handler enthält, der handleClick aufruft und Daten als Argument übergibt.

Router Dom reagieren

React Router DOM ist eine Routing-Bibliothek für React, die es Entwicklern ermöglicht, Routen innerhalb ihrer React-Anwendungen zu erstellen und zu verwalten. Es bietet die Kernkomponenten, die zum Erstellen komplexer, mehrseitiger Webanwendungen mit React erforderlich sind, einschließlich Komponenten wie Link, Route, Switch und BrowserRouter. Es bietet auch Funktionen wie dynamische Routenanpassung und Standortverfolgung. Mit React Router DOM können Entwickler ganz einfach Einzelseitenanwendungen mit mehreren Ansichten und Routen erstellen, ohne die URL oder den Browserverlauf manuell verwalten zu müssen.

Wie übergeben Sie Daten durch Navigieren in React-Router-Dom

In React Router können Daten mithilfe des Zustandsobjekts der Verlaufs-API durch die Navigation geleitet werden. Auf das Zustandsobjekt kann über die Requisiten jeder Komponente zugegriffen werden, die von a gerendert wird Komponente. Um Daten zu übergeben, können Sie diese beim Aufrufen der Navigationsfunktion zum Zustandsobjekt hinzufügen. Zum Beispiel:

const { Geschichte } = this.props;
Geschichte.push({
Pfadname: '/irgendein/Pfad',
Zustand: { einigeDaten: 'Daten' }
});