Επιλύθηκε: κατεβάστε το react router dom

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

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

ReactDOM.render(
  <Router>
    <Route path="/">
      <App />
    </Route>
  </Router>, 
  document.getElementById('root'));

1. "εισαγωγή { BrowserRouter ως Router, Route } από το 'react-router-dom';" – Αυτή η γραμμή εισάγει τα στοιχεία BrowserRouter και Route από τη βιβλιοθήκη react-router-dom.

2. “ReactDOM.render(” – Αυτή η γραμμή καλεί τη μέθοδο απόδοσης ReactDOM για απόδοση ενός στοιχείου React στο DOM του παρεχόμενου κοντέινερ και επιστροφή αναφοράς στο στοιχείο (ή επιστρέφει μηδενική τιμή για στοιχεία χωρίς κατάσταση).

3. "” – Αυτή είναι μια ετικέτα ανοίγματος για ένα στοιχείο δρομολογητή που θα χρησιμοποιηθεί για την περιτύλιξη όλων των διαδρομών μας, προκειμένου να παρέχουμε λειτουργικότητα δρομολόγησης για την εφαρμογή μας.

4. "” – Αυτή είναι μια ετικέτα ανοίγματος για ένα στοιχείο Διαδρομής που θα χρησιμοποιηθεί για τον καθορισμό μιας μεμονωμένης διαδρομής στην εφαρμογή μας που θα ταιριάζει με τυχόν αιτήματα που υποβάλλονται στο '/'.

5. "” – Αυτή είναι μια ετικέτα που κλείνει αυτόματα, η οποία αποδίδει ένα στοιχείο εφαρμογής στο δέντρο DOM όταν αυτή η διαδρομή αντιστοιχίζεται με το react router dom.
Το στοιχείο της εφαρμογής μπορεί να είναι οποιοδήποτε στοιχείο React που έχουμε ορίσει αλλού στη βάση κώδικα μας ή έχουμε εισαγάγει από άλλη βιβλιοθήκη ή πακέτο, όπως το Material UI ή το Bootstrap κ.λπ…

6. "" - Αυτή είναι μια ετικέτα κλεισίματος για το στοιχείο διαδρομής που άνοιξε στη γραμμή 4 παραπάνω, κλείνει αυτόν τον συγκεκριμένο ορισμό διαδρομής, ώστε να μπορούν να προστεθούν άλλες διαδρομές, εάν χρειαστεί αργότερα, στη βάση κωδίκων μας χωρίς να επηρεαστεί η λειτουργικότητα ή η συμπεριφορά αυτού .

7. "" - Αυτή είναι μια ετικέτα κλεισίματος για το στοιχείο δρομολογητή που άνοιξε στη γραμμή 3 παραπάνω, κλείνει αυτόν τον συγκεκριμένο ορισμό δρομολογητή, ώστε να μπορούν να προστεθούν άλλοι δρομολογητές, εάν χρειαστεί αργότερα, στη βάση κώδικα μας χωρίς να επηρεαστεί η λειτουργικότητα ή η συμπεριφορά αυτού του ..

8.”document.getElementById('root'));" – Τέλος, περνάμε στο έγγραφο getElementById('root') ως όρισμα στη μέθοδο απόδοσης ReactDOM που του λέει πού ακριβώς θέλουμε να προσαρτήσουμε/αποδόσουμε την εφαρμογή μέσα στο δέντρο DOM (σε αυτήν την περίπτωση μέσα σε ένα στοιχείο με id=" ρίζα").

πακέτο react-router-dom

Το React Router είναι μια δημοφιλής βιβλιοθήκη δρομολόγησης για το React. Παρέχει ένα ισχυρό, εύχρηστο API για τη διαχείριση διαδρομών και πλοήγησης εφαρμογών. Το πακέτο react-router-dom είναι η επίσημη έκδοση του React Router για εφαρμογές web. Παρέχει εξαρτήματα όπως και για να βοηθήσετε στη διαχείριση της δρομολόγησης στην εφαρμογή σας. Περιλαμβάνει επίσης αγκίστρια όπως useHistory, useLocation και useParams για πρόσβαση στις πληροφορίες της τρέχουσας διαδρομής μέσα από τα στοιχεία σας. Με το react-router-dom μπορείτε εύκολα να δημιουργήσετε δυναμικές διαδρομές με βάση παραμέτρους URL, συμβολοσειρές ερωτημάτων ή ακόμα και προσαρμοσμένη λογική. Μπορείτε επίσης να δημιουργήσετε ένθετες διαδρομές με δυναμικά τμήματα για να παρέχετε πιο αναλυτικό έλεγχο στη δομή πλοήγησης της εφαρμογής σας.

πώς να κατεβάσετε το React router dom Code Παράδειγμα

1. Εγκαταστήστε το React Router Dom:
Στον κατάλογο του έργου σας, εκτελέστε την ακόλουθη εντολή για να εγκαταστήσετε το React Router Dom:
`npm εγκατάσταση react-router-dom`

2. Εισαγωγή React Router Dom:
Αφού εγκαταστήσετε το React Router Dom, μπορείτε να το εισαγάγετε στο έργο σας με τον ακόλουθο κώδικα:
`εισαγωγή { BrowserRouter as Router, Route } από το 'react-router-dom'`

3. Δημιουργήστε ένα στοιχείο διαδρομής:
Στη συνέχεια, δημιουργήστε ένα στοιχείο διαδρομής που θα αποδίδει τη σελίδα όταν ένας χρήστης επισκεφτεί την καθορισμένη διαδρομή. Για παράδειγμα, εάν θέλετε να αποδώσετε μια σελίδα όταν κάποιος επισκέπτεται το /home στην εφαρμογή σας, μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα:
``

4. Τυλίξτε την εφαρμογή σας με στοιχείο δρομολογητή:
Τέλος, τυλίξτε την εφαρμογή σας με το στοιχείο του δρομολογητή, έτσι ώστε όλες οι διαδρομές σας να αποδίδονται σωστά. Μπορείτε να το κάνετε αυτό χρησιμοποιώντας τον ακόλουθο κώδικα στο αρχείο root (συνήθως index.js): ` `.