Επιλύθηκε: Τρόπος ανακατεύθυνσης στο React Router v6

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

In React Router v6, you can use the <Redirect> component to redirect from one page to another.

Example: 

import { Redirect } from 'react-router-dom'; 
 
<Route exact path="/old-path"> 
   <Redirect to="/new-path" /> 
</Route>

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

2.
– Αυτή η γραμμή δημιουργεί ένα στοιχείο διαδρομής με ακριβή διαδρομή "/παλιά διαδρομή".

3.
– Αυτή η γραμμή χρησιμοποιεί το στοιχείο Redirect για να ανακατευθύνει από το "/old-path" στο "/new-path".

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

v6

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

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

Τι είναι το react router;

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

Τύποι δρομολογητών στο react

Το React Router είναι μια βιβλιοθήκη δρομολόγησης για το React που επιτρέπει στους προγραμματιστές να δημιουργούν εφαρμογές μιας σελίδας με πλοήγηση και δρομολόγηση URL. Παρέχει τρεις τύπους δρομολογητών: BrowserRouter, HashRouter και MemoryRouter.

BrowserRouter: Αυτός ο δρομολογητής χρησιμοποιεί το API ιστορικού HTML5 για να διατηρεί το UI σας συγχρονισμένο με τη διεύθυνση URL. Χρησιμοποιείται όταν θέλετε να χρησιμοποιήσετε πραγματικές διευθύνσεις URL στην εφαρμογή σας.

HashRouter: Αυτός ο δρομολογητής χρησιμοποιεί το τμήμα κατακερματισμού της διεύθυνσης URL (δηλαδή, #) για να διατηρεί τη διεπαφή χρήστη σας συγχρονισμένη με τη διεύθυνση URL. Χρησιμοποιείται όταν δεν θέλετε να χρησιμοποιήσετε πραγματικές διευθύνσεις URL ή όταν χρειάζεστε συμβατότητα με παλαιότερα προγράμματα περιήγησης που δεν υποστηρίζουν το API ιστορικού HTML5.

MemoryRouter: Αυτός ο δρομολογητής διατηρεί ένα ιστορικό τοποθεσιών στη μνήμη και δεν αλληλεπιδρά με τη γραμμή διευθύνσεων του προγράμματος περιήγησης ούτε δημιουργεί πραγματικές διευθύνσεις URL. Είναι χρήσιμο για σκοπούς δοκιμής ή για περιβάλλοντα όπου η χρήση πραγματικών διευθύνσεων URL δεν είναι επιθυμητή (π.χ. απόδοση από την πλευρά του διακομιστή).