Ανακατεύθυνση σε διαφορετική διαδρομή στο React Router
Τώρα τα δεδομένα που εισάγονται στη φόρμα κατά την επεξεργασία του προϊόντος αποθηκεύονται, αλλά υπάρχει ένα ΑΛΛΑ - μετά την αποθήκευση των δεδομένων παραμένουμε στη σελίδα με τη φόρμα, ενώ εμείς πρέπει να επιστρέψουμε στη σελίδα του προϊόντος. Σε αυτό θα μας βοηθήσει η ανακατεύθυνση, με την οποία θα γνωριστούμε σε αυτό το μάθημα.
Ας ανοίξουμε το αρχείο edit.jsx
και να εισάγουμε το redirect από
τη βιβλιοθήκη:
import { redirect } from 'react-router-dom';
Και μετά ας κάνουμε τη συνάρτηση
action να επιστρέφει τώρα
όχι 1, αλλά να μας ανακατευθύνει
στη σωστή διαδρομή. Σε αυτή την περίπτωση
πρέπει να επιστρέψουμε πίσω στη
σελίδα του προϊόντος:
return redirect(`/products/${params.productId}`);
Τώρα, πατώντας το κουμπί αποθήκευσης, εμφανιζόμαστε πίσω στη σελίδα του προϊόντος με τα ενημερωμένα δεδομένα.
Το ίδιο ακριβώς μπορούμε να κάνουμε και για την προσθήκη νέου προϊόντος, αφού μάλλον θα ήταν πιο βολικό να βγαίνουμε αμέσως στη φόρμα και να την συμπληρώνουμε. Ας το κάνουμε έτσι.
Για αρχή, τώρα πρέπει να ανοίξουμε
το αρχείο root.jsx και να εισάγουμε
το redirect, αφού η προσθήκη
προϊόντων γίνεται στην κορυφαία σελίδα:
import { redirect } from 'react-router-dom';
Παίρνουμε πάλι τη συνάρτηση action και
τώρα θα επιστρέφουμε όχι product,
αλλά θα κάνουμε ανακατεύθυνση στη σελίδα
επεξεργασίας:
return redirect(`/products/${product.id}/edit`);
Ας το ελέγξουμε και αυτό. Ας κάνουμε κλικ τώρα στο κουμπί προσθήκης προϊόντος και θα δούμε τη φόρμα για την επεξεργασία του
Πάρτε την εφαρμογή που δημιουργήσατε στα παραδοτέα στα προηγούμενα μαθήματα. Χρησιμοποιώντας το υλικό του μαθήματος, υλοποιήστε σε αυτήν την ανακατεύθυνση στη σελίδα του μαθητή μετά από πάτημα του κουμπιού αποθήκευσης δεδομένων στη σελίδα με τη φόρμα.
Και τώρα υλοποιήστε την ανακατεύθυνση από την κύρια σελίδα στη σελίδα με τη φόρμα επεξεργασίας δεδομένων του μαθητή μετά από κλικ στο κουμπί προσθήκης μαθητή στη λίστα.
