Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών.
Δημιουργήστε μια προσαρμοσμένη σελίδα 404 χρησιμοποιώντας μια απλή διαδρομή React για να προσφέρετε στους επισκέπτες σας μια χρήσιμη εμπειρία όταν τη χρειάζονται περισσότερο.
Αργά ή γρήγορα, ένας χρήστης θα επισκεφτεί μια διεύθυνση URL που δεν υπάρχει στον ιστότοπό σας. Το τι κάνει ο χρήστης μετά από αυτό εξαρτάται από εσάς.
Μπορεί να πατήσουν το κουμπί πίσω και να φύγουν από τον ιστότοπό σας. Αντίθετα, μπορείτε να παρέχετε μια χρήσιμη σελίδα 404 για να τους βοηθήσετε να συνεχίσουν να πλοηγούνται στον ιστότοπό σας.
Για ιστότοπους React, μπορείτε να χρησιμοποιήσετε το δρομολογητή React για να δημιουργήσετε μια χρήσιμη σελίδα 404 που δεν βρέθηκε.
Δημιουργία σελίδας 404
ο Σφάλμα 404 εμφανίζεται όταν προσπαθείτε να επισκεφτείτε μια σελίδα σε έναν ιστότοπο που ο διακομιστής δεν μπορεί να βρει. Ως προγραμματιστής, ο χειρισμός των σφαλμάτων 404 σημαίνει τη δημιουργία μιας σελίδας που χρησιμοποιεί ο διακομιστής ως αντικατάσταση όταν δεν μπορεί να βρει τη σελίδα που ζητήθηκε.
Στο React, το κάνετε αυτό δημιουργώντας ένα στοιχείο που δεν βρέθηκε που θα αποδίδεται σε διαδρομές που δεν υπάρχουν.
Αυτό το άρθρο προϋποθέτει ότι έχετε ήδη μια λειτουργική εφαρμογή React με ρύθμιση δρομολόγησης. Αν δεν το κάνετε, δημιουργήστε μια εφαρμογή React και μετά εγκαταστήστε React Router.
Δημιουργήστε ένα νέο αρχείο που ονομάζεται NotFound.js και προσθέστε τον ακόλουθο κώδικα για να δημιουργήσετε τη σελίδα 404.
εισαγωγή { Σύνδεσμος } από "react-router-dom"?
εξαγωγήΠροκαθορισμένολειτουργίαΔεν βρέθηκε() {
ΕΠΙΣΤΡΟΦΗ (
<div>
<h1>Ωχ! Μοιάζεις να έχεις χαθεί.</h1>
<Π>Εδώ είναι μερικοί χρήσιμοι σύνδεσμοι:</Π>
<Σύνδεσμος προς='/'>Σπίτι</Link>
<Σύνδεσμος προς='/blog'>Ιστολόγιο</Link>
<Σύνδεσμος προς='/contact'>Επικοινωνία</Link>
</div>
)
}
Αυτή η σελίδα 404 αποδίδει ένα μήνυμα και συνδέσμους για να ανακατευθύνει έναν χρήστη σε κοινές σελίδες στον ιστότοπο.
Δρομολόγηση στη Σελίδα 404
Μπορείτε να δημιουργήσετε μια κανονική διαδρομή χρησιμοποιώντας το δρομολογητή React ως εξής:
εισαγωγή { Διαδρομή, Διαδρομές } από "react-router-dom"?
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
<Διαδρομές>
<Διαδρομή διαδρομής="/" στοιχείο ={ <Σπίτι/> }/>
</Routes>
)
}
Καθορίζετε τη διαδρομή URL και το στοιχείο που θέλετε να αποδώσετε σε αυτήν τη διαδρομή.
Η σελίδα 404 εμφανίζει διαδρομές που δεν υπάρχουν στον ιστότοπο. Έτσι, αντί να καθορίσετε τη διαδρομή, χρησιμοποιήστε έναν αστερίσκο (*).
<Διαδρομή διαδρομής='*' στοιχείο ={<Δεν βρέθηκε />}/>
Χρησιμοποιώντας * αποδίδει το στοιχείο NotFound για όλες τις διευθύνσεις URL που δεν προσδιορίζονται στις διαδρομές.
Δρομολόγηση στο React
Μπορείτε εύκολα να δημιουργήσετε μια σελίδα 404 για όλες τις διευθύνσεις URL που δεν υπάρχουν στην εφαρμογή Ιστού React χρησιμοποιώντας έναν δρομολογητή.
Τα προγράμματα περιήγησης έχουν μια προεπιλεγμένη σελίδα 404, αλλά η δημιουργία μιας προσαρμοσμένης σάς επιτρέπει να πείτε στους χρήστες σας τι πήγε στραβά και πώς μπορούν να το διορθώσουν. Μπορείτε επίσης να δημιουργήσετε μια σελίδα 404 που ταιριάζει στην επωνυμία σας.
