Weiterleitung zu einer anderen Route in React Router
Jetzt werden die Daten, die in das Formular beim Bearbeiten eines Produkts eingegeben wurden, gespeichert, aber es gibt ein ABER - nach dem Speichern der Daten bleiben wir auf der Seite mit dem Formular, und wir müssen zurück auf die Produktseite gelangen. Dabei hilft uns die Weiterleitung, die wir in dieser Lektion kennenlernen werden.
Lassen Sie uns die Datei edit.jsx öffnen
und redirect aus der Bibliothek importieren:
import { redirect } from 'react-router-dom';
Und dann sorgen wir dafür, dass die Funktion
action jetzt nicht 1 zurückgibt,
sondern uns auf die gewünschte Route weiterleitet. In diesem Fall
müssen wir zurück auf die Produktseite gelangen:
return redirect(`/products/${params.productId}`);
Jetzt gelangen wir durch Klicken auf die Speichern-Schaltfläche zurück auf die Produktseite mit den aktualisierten Daten.
Das Gleiche können wir auch für das Hinzufügen eines neuen Produkts tun, denn es wäre wahrscheinlich bequemer, sofort auf das Formular zu gelangen und es auszufüllen. Lassen Sie uns das so machen.
Zunächst müssen wir jetzt die Datei
root.jsx öffnen und
redirect importieren, da das Hinzufügen von Produkten auf der Root-Seite stattfindet:
import { redirect } from 'react-router-dom';
Nehmen wir wieder die Funktion action und geben jetzt nicht product zurück, sondern leiten auf die Bearbeitungsseite weiter:
return redirect(`/products/${product.id}/edit`);
Lassen Sie uns auch das überprüfen. Klicken wir jetzt auf die Schaltfläche zum Hinzufügen eines Produkts und sehen das Formular zu seiner Bearbeitung.
Nehmen Sie die Anwendung, die Sie in den Aufgaben zu den vorherigen Lektionen erstellt haben. Nutzen Sie die Materialien der Lektion, um darin eine Weiterleitung zur Studentenseite nach dem Klicken der Speichern-Schaltfläche auf der Seite mit dem Formular zu implementieren.
Implementieren Sie nun eine Weiterleitung von der Hauptseite zur Seite mit dem Bearbeitungsformular für Studentendaten nach dem Klick auf die Schaltfläche zum Hinzufügen eines Studenten zur Liste.
