Επιλύθηκε: Χρησιμοποιήστε την εφαρμογή History React Router v6

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

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

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// Αυτός ο κώδικας εισάγει τα στοιχεία BrowserRouter, Switch, Route και useHistory από τη βιβλιοθήκη react-router-dom.
// Στη συνέχεια δημιουργεί μια συνάρτηση που ονομάζεται App η οποία χρησιμοποιεί το άγκιστρο useHistory για να δημιουργήσει ένα αντικείμενο ιστορικού.
// Αυτό το αντικείμενο ιστορικού χρησιμοποιείται σε μια συνάρτηση που ονομάζεται handleClick, η οποία ωθεί μια νέα καταχώρηση στη στοίβα ιστορικού όταν καλείται.
// Η συνάρτηση App επιστρέφει στη συνέχεια κάποιο JSX το οποίο περιλαμβάνει ένα κουμπί με ένα πρόγραμμα χειρισμού onClick που καλεί το handleClick όταν πατηθεί.
// Τέλος, υπάρχει ένα στοιχείο Switch με ένα στοιχείο Route μέσα του που αποδίδει το στοιχείο NewLocation όταν η διαδρομή του ταιριάζει με το "/new-location".

Τι είναι το UseHistory

Το useHistory είναι ένα React Hook που παρέχεται από το React Router που επιτρέπει στα στοιχεία να έχουν πρόσβαση στο αντικείμενο ιστορικού για πλοήγηση μέσω προγραμματισμού. Μπορεί να χρησιμοποιηθεί για να προωθήσει νέες τοποθεσίες στη στοίβα του ιστορικού, να αντικαταστήσει την τρέχουσα τοποθεσία, να πάει πέρα ​​δώθε στο ιστορικό κ.λπ.

Πώς μπορώ να λάβω το ιστορικό διαδρομής στο react

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

εισαγωγή { useHistory } από το 'react-router-dom';

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

// Τώρα μπορείτε να αποκτήσετε πρόσβαση στο ιστορικό διαδρομής μέσω του αντικειμένου "ιστορικό".

ΕΠΙΣΤΡΟΦΗ (…);
}

Ο δρομολογητής React χρησιμοποιεί ιστορικό API

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