Wie kann man mithilfe des React Routers effektiv Daten zwischen Seiten übertragen?

So übergeben Sie Daten von einer Seite an eine andere Seite mit React Router

Bei der Arbeit mit React Router kann es vorkommen, dass Sie auf Situationen stoßen, in denen Sie sie benötigen um Daten von einer Seite an eine andere weiterzugeben, beispielsweise um Benutzerdetails auf einem anderen Bildschirm anzuzeigen. Hier sind mehrere Optionen zum Übergeben von Daten:

Option 1: Routenstatus übergeben

• Verwenden Sie die Link-Komponente in React Router DOM v6 oder die Navigate-Komponente in v5 und legen Sie die Status-Requisite fest.
• Entpacken Sie den Status aus dem Standortobjekt auf dem Empfänger Seite.
• Vorteil: Der Status ist in der URL nicht sichtbar und hält die Benutzeroberfläche sauber.

Option 2: Übergeben Sie etwas im URL-Pfad

• Hängen Sie die Daten mithilfe einer Link-Komponente oder einer programmgesteuerten Navigation an den URL-Pfad an.
• Greifen Sie über den auf den Parameter zu props.match-Objekt auf der empfangenden Seite.
• Vorteil: Daten werden in der URL gespeichert und können einfach geteilt werden.

Option 3: Übergeben Sie etwas in der URL-Abfrage String

• Verwenden Sie die Suchstütze in der Link-Komponente oder die programmgesteuerte Navigation, um Daten als Abfrage zu übergeben Parameter.
• Verwenden Sie den useSearchParams-Hook (v6) oder das URLSearchParams-Objekt (v5), um die Abfrageparameter auf der empfangenden Seite zu analysieren.
• Vorteil: Kleine Datenmengen können problemlos übergeben werden.

Überlegungen zur Reaktionsklasse Komponenten

• React Router DOM Version 6 hat Routen-Requisiten und das withRouter-HOC entfernt.
• Um auf Routen-Requisiten in Klassenkomponenten zuzugreifen, verwenden Sie ein benutzerdefiniertes withRouter-HOC, das das Notwendige enthält Haken.

Das obige ist der detaillierte Inhalt vonWie kann man mithilfe des React Routers effektiv Daten zwischen Seiten übertragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!