Επιλύθηκε: η σελίδα επαναφόρτωσης του δρομολογητή react δεν βρέθηκε

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

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// Γραμμή 1: Αυτή η γραμμή εισάγει τα στοιχεία BrowserRouter, Route και Switch από τη βιβλιοθήκη react-router-dom.

// Γραμμή 3: Αυτή η γραμμή ορίζει μια συνάρτηση που ονομάζεται App και επιστρέφει τον κώδικα JSX.

// Γραμμή 5: Αυτή η γραμμή αναδιπλώνει ολόκληρο τον κώδικα JSX σε ένα στοιχείο Router από το react-router-dom.

// Γραμμή 6: Αυτή η γραμμή αναδιπλώνει όλες τις διαδρομές σε ένα στοιχείο Switch από το react-router-dom.

// Γραμμές 7 – 9: Αυτές οι γραμμές ορίζουν δύο διαδρομές για το '/' και το '/about' αντίστοιχα με τα αντίστοιχα στοιχεία τους (Home και About).

// Γραμμές 11 – 12: Αυτές οι γραμμές ορίζουν μια διαδρομή για όταν δεν ταιριάζουν άλλες διαδρομές, η οποία αποδίδει μια ετικέτα h1 που λέει "Η σελίδα δεν βρέθηκε".

Σφάλμα δεν βρέθηκε η σελίδα

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

Πώς μπορώ να χειριστώ τη σελίδα που δεν βρέθηκε στο δρομολογητή react

Όταν χρησιμοποιείτε το React Router, μπορείτε να χειριστείτε μια σελίδα που δεν βρέθηκε δημιουργώντας μια προσαρμοσμένη διαδρομή που θα αποδίδει ένα στοιχείο NotFound όταν η διεύθυνση URL δεν ταιριάζει με καμία από τις υπάρχουσες διαδρομές. Για να το κάνετε αυτό, πρέπει να δημιουργήσετε μια νέα διαδρομή με τη διαδρομή να έχει οριστεί σε "*" και να αποδώσετε το στοιχείο NotFound.

Για παράδειγμα:

} />

Αυτό θα ταιριάζει με οποιαδήποτε διεύθυνση URL που δεν έχει ήδη αντιστοιχιστεί από μια υπάρχουσα διαδρομή και θα αποδώσει το στοιχείο NotFound.

Πώς μπορώ να αναγκάσω μια σελίδα που αντιδρά να φορτώσει ξανά

Στο React Router, μπορείτε να αναγκάσετε μια σελίδα να φορτώσει ξανά χρησιμοποιώντας τη μέθοδο αντικατάστασης στο αντικείμενο ιστορικού. Αυτό θα αντικαταστήσει την τρέχουσα καταχώρηση στη στοίβα του ιστορικού με μια νέα, αναγκάζοντας έτσι μια νέα φόρτωση της σελίδας. Για να χρησιμοποιήσετε αυτήν τη μέθοδο, πρέπει πρώτα να αποκτήσετε πρόσβαση στο αντικείμενο ιστορικού. Μπορείτε να το κάνετε αυτό περνώντας το ως στήριγμα κατά τη δημιουργία του στοιχείου του δρομολογητή σας:

const AppRouter = () => (

{/* Οι διαδρομές σας εδώ */}

);

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

history.replace('/some-route');