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

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

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

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// Γραμμή 1: Αυτή η γραμμή εισάγει το άγκιστρο useHistory από τη βιβλιοθήκη react-router-dom.
// Γραμμή 3: Αυτή η γραμμή δηλώνει μια σταθερά που ονομάζεται MyComponent και είναι μια συνάρτηση που επιστρέφει JSX.
// Γραμμή 4: Αυτή η γραμμή δηλώνει μια σταθερά που ονομάζεται ιστορικό, η οποία εκχωρείται στο άγκιστρο useHistory που εισάγεται από το react-router-dom.
// Γραμμή 6: Αυτή η γραμμή δηλώνει μια συνάρτηση που ονομάζεται handleClick η οποία λαμβάνει σε μία παράμετρο, δεδομένα.
// Γραμμή 7: Αυτή η γραμμή χρησιμοποιεί το αντικείμενο ιστορικού για να προωθήσει μια νέα διαδρομή στη στοίβα με όνομα διαδρομής '/myroute' και κατάσταση δεδομένων που μεταβιβάζονται ως αντικείμενο.
// Γραμμές 9 – 11: Αυτές οι γραμμές επιστρέφουν JSX που περιέχει ένα στοιχείο κουμπιού με έναν χειριστή συμβάντων onClick που καλεί το handleClick και μεταβιβάζει δεδομένα ως όρισμα.

React Router Dom

Το React Router DOM είναι μια βιβλιοθήκη δρομολόγησης για το React που επιτρέπει στους προγραμματιστές να δημιουργούν και να διαχειρίζονται διαδρομές εντός των εφαρμογών React τους. Παρέχει τα βασικά στοιχεία που είναι απαραίτητα για τη δημιουργία πολύπλοκων εφαρμογών web με πολλές σελίδες με το React, συμπεριλαμβανομένων στοιχείων όπως Link, Route, Switch και BrowserRouter. Παρέχει επίσης δυνατότητες όπως δυναμική αντιστοίχιση διαδρομής και παρακολούθηση τοποθεσίας. Με το React Router DOM, οι προγραμματιστές μπορούν εύκολα να δημιουργήσουν εφαρμογές μίας σελίδας με πολλές προβολές και διαδρομές χωρίς να χρειάζεται να διαχειρίζονται μη αυτόματα τη διεύθυνση URL ή το ιστορικό του προγράμματος περιήγησης.

Πώς περνάτε δεδομένα μέσω της πλοήγησης στο react-router-Dom

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

const { history } = this.props;
history.push({
pathname: '/some/path',
κατάσταση: { someData: 'data' }
})?