Επιλύθηκε: ανακατεύθυνση με δρομολογητή react v6

Το κύριο πρόβλημα που σχετίζεται με την ανακατεύθυνση με το React Router v6 είναι ότι το στοιχείο δεν αποδίδεται εκ νέου όταν συμβαίνει μια ανακατεύθυνση. Αυτό σημαίνει ότι οποιαδήποτε κατάσταση ή στηρίγματα που σχετίζονται με το στοιχείο δεν θα ενημερωθούν όταν πραγματοποιηθεί η ανακατεύθυνση και οποιεσδήποτε αλλαγές έγιναν σε αυτές τις τιμές δεν θα αντικατοπτρίζονται στη νέα σελίδα. Επιπλέον, δεδομένου ότι το React Router v6 δεν υποστηρίζει συμβολοσειρές ερωτημάτων, τυχόν παράμετροι ερωτήματος που διαβιβάζονται στη διεύθυνση URL θα χαθούν επίσης κατά τη διάρκεια μιας ανακατεύθυνσης.

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

<Redirect to="/home" />

1. Αυτή η γραμμή εισάγει το στοιχείο Redirect από τη βιβλιοθήκη react-router-dom.

2. Αυτή η γραμμή αποδίδει ένα στοιχείο Redirect, το οποίο θα ανακατευθύνει τον χρήστη στη διαδρομή "/home".

Πώς μπορώ να ανακατευθύνω στο React Router v6

v6

Το React Router v6 παρέχει ένα νέο στοιχείο που ονομάζεται που μπορεί να χρησιμοποιηθεί για την ανακατεύθυνση των χρηστών από τη μια σελίδα στην άλλη. Για να το χρησιμοποιήσετε, πρέπει απλώς να εισαγάγετε το στοιχείο Redirect από το πακέτο react-router-dom και στη συνέχεια να το χρησιμοποιήσετε στη διαμόρφωση της διαδρομής σας. Όταν ένας χρήστης επισκέπτεται τη διαδρομή που καθορίζεται στο prop 'από', θα ανακατευθυνθεί στη διαδρομή που καθορίζεται στο prop 'to'. Για παράδειγμα:

εισαγωγή { Ανακατεύθυνση } από το 'react-router-dom';
} />

Πώς μπορώ να ανακατευθύνω στο δρομολογητή react v6 μετά τη σύνδεση

Η ανακατεύθυνση μετά από μια επιτυχημένη σύνδεση είναι μια κοινή δυνατότητα σε εφαρμογές web. Στο React Router v6, μπορείτε να χρησιμοποιήσετε το στοιχείο για την ανακατεύθυνση του χρήστη μετά από μια επιτυχημένη σύνδεση.

Για να το κάνετε αυτό, θα χρειαστεί να δημιουργήσετε μια διαδρομή που θα ελέγχει εάν ο χρήστης είναι συνδεδεμένος και στη συνέχεια θα τον ανακατευθύνει ανάλογα. Για παράδειγμα:

{
if (isLoggedIn) {
απόδοση ;
} Else {
απόδοση ;
}
}} />

Σε αυτό το παράδειγμα, ελέγχουμε εάν ο χρήστης είναι συνδεδεμένος και, στη συνέχεια, αποδίδουμε το στοιχείο LoginPage ή τον ανακατευθύνουμε στο /dashboard. Μπορείτε επίσης να περάσετε στηρίγματα στο στοιχείο Ανακατεύθυνσης όπως: Αυτό σας επιτρέπει να παρακολουθείτε πού βρισκόταν ο χρήστης πριν ανακατευθυνθεί.

Πώς ανακατευθύνω αυτόματα στο react

Το React Router παρέχει ένα στοιχείο Redirect που μπορεί να χρησιμοποιηθεί για αυτόματη ανακατεύθυνση των χρηστών όταν πληρούνται ορισμένες προϋποθέσεις. Για να το χρησιμοποιήσετε, πρέπει να περάσετε στη διαδρομή στην οποία θέλετε να ανακατευθυνθείτε ως υποστηρικτικό. Μπορείτε επίσης να μεταβιβάσετε ένα αντικείμενο με παραμέτρους κατάστασης και/ή ερωτήματος εάν χρειάζεται.

Για αυτόματη ανακατεύθυνση, θα χρειαστεί να χρησιμοποιήσετε το στοιχείο μέσα σε ένα στοιχείο διαδρομής και να ορίσετε μια συνθήκη για το πότε πρέπει να πραγματοποιηθεί η ανακατεύθυνση. Για παράδειγμα, εάν θέλατε να ανακατευθύνετε τους χρήστες από την αρχική σελίδα της εφαρμογής σας στη σελίδα σύνδεσης αφού κάνουν κλικ σε έναν σύνδεσμο, θα μπορούσατε να κάνετε κάτι σαν αυτό:

{isLoggedIn ? : }

Σε αυτό το παράδειγμα, χρησιμοποιούμε τη μεταβλητή boolean isLoggedIn (η οποία θα πρέπει να οριστεί κάπου αλλού) ως προϋπόθεση για το πότε πρέπει να εκτελέσουμε την ανακατεύθυνση. Εάν είναι αλήθεια, τότε αποδίδουμε το στοιχείο Home μας. Διαφορετικά, πραγματοποιούμε την ανακατεύθυνση.

Πώς κάνετε ανακατεύθυνση μετά από 5 δευτερόλεπτα στην αντίδραση

Για ανακατεύθυνση μετά από 5 δευτερόλεπτα στο React Router, μπορείτε να χρησιμοποιήσετε τη συνάρτηση setTimeout() για να καλέσετε τη μέθοδο history.push() με την επιθυμητή διαδρομή ως όρισμα.

Παράδειγμα:
εισαγωγή { useHistory } από το "react-router-dom";
const history = useHistory();
setTimeout(() => {
history.push(“/redirectedPage”);
}, 5000).