Το κύριο πρόβλημα που σχετίζεται με την ανακατεύθυνση του δρομολογητή React 404 είναι ότι μπορεί να είναι δύσκολο να εφαρμοστεί. Εφόσον το React Router δεν έχει ενσωματωμένη σελίδα 404, οι προγραμματιστές πρέπει να δημιουργήσουν με μη αυτόματο τρόπο μια διαδρομή για τη σελίδα 404 και στη συνέχεια να ρυθμίσουν τον δρομολογητή για να ανακατευθύνει τυχόν αιτήματα που δεν ταιριάζουν με μια υπάρχουσα διαδρομή. Αυτό απαιτεί πρόσθετο κώδικα και ρυθμίσεις παραμέτρων, οι οποίες μπορεί να είναι χρονοβόρες και δύσκολο να εντοπιστούν σφάλματα εάν κάτι πάει στραβά. Επιπλέον, εάν ένας χρήστης πλοηγηθεί απευθείας σε μια διεύθυνση URL που δεν υπάρχει, θα εξακολουθεί να βλέπει μια σελίδα σφάλματος αντί να ανακατευθύνεται στη σελίδα 404.
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const App = () => (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
{/* 404 Redirect */}
<Route render={() => (<Redirect to="/" />)} />
</Switch>
</Router>
);
// Γραμμή 1: Αυτή η γραμμή εισάγει τα στοιχεία BrowserRouter, Route και Switch από τη βιβλιοθήκη react-router-dom.
// Γραμμή 3: Αυτή η γραμμή ορίζει μια συνάρτηση που ονομάζεται App που επιστρέφει το JSX.
// Γραμμές 5-7: Αυτές οι γραμμές τυλίγουν το στοιχείο της εφαρμογής σε ένα στοιχείο δρομολογητή από το react-router-dom.
// Γραμμές 8-10: Αυτές οι γραμμές ορίζουν δύο διαδρομές για τα στοιχεία Home και About αντίστοιχα.
// Γραμμή 12: Αυτή η γραμμή ορίζει μια διαδρομή που ανακατευθύνει στην Αρχική σελίδα εάν δεν ταιριάζει άλλη διαδρομή.
Τι είναι ο κωδικός σφάλματος 404
Ένας κωδικός σφάλματος 404 στο δρομολογητή React είναι ένας κωδικός κατάστασης HTTP που υποδεικνύει ότι δεν ήταν δυνατή η εύρεση του ζητούμενου πόρου. Συνήθως επιστρέφεται όταν ένας χρήστης επιχειρεί να αποκτήσει πρόσβαση σε μια σελίδα ή μια διαδρομή που δεν υπάρχει. Αυτό μπορεί να συμβεί εάν ο χρήστης έχει πληκτρολογήσει λάθος μια διεύθυνση URL ή εάν η σελίδα έχει αφαιρεθεί ή μετακινηθεί χωρίς ενημέρωση των συνδέσμων προς αυτήν. Όταν συμβεί αυτό, το React Router θα εμφανίσει μια γενική σελίδα 404 με ένα κατάλληλο μήνυμα που ενημερώνει τον χρήστη για το σφάλμα του.
404 Ανακατεύθυνση
Στο React Router, μια ανακατεύθυνση 404 είναι ένας τρόπος ανακατεύθυνσης των χρηστών σε διαφορετική σελίδα όταν προσπαθούν να αποκτήσουν πρόσβαση σε μια μη έγκυρη διεύθυνση URL. Αυτό μπορεί να είναι χρήσιμο για την παροχή στους χρήστες καλύτερης εμπειρίας όταν εισάγουν μια εσφαλμένη διεύθυνση URL ή προσπαθούν να αποκτήσουν πρόσβαση σε μια σελίδα που δεν υπάρχει. Η ανακατεύθυνση 404 μπορεί να υλοποιηθεί χρησιμοποιώντας το στοιχείο Redirect από το React Router, το οποίο σας επιτρέπει να καθορίσετε το όνομα διαδρομής της σελίδας στην οποία θέλετε να ανακατευθύνετε τον χρήστη. Για παράδειγμα, εάν κάποιος προσπαθήσει να αποκτήσει πρόσβαση στο /invalid-url, θα μπορούσατε να χρησιμοποιήσετε το στοιχείο Ανακατεύθυνση ως εξής:
