Μια Εφαρμογή Μεμονωμένης Σελίδας (SPA) είναι ένας ιστότοπος ή μια εφαρμογή Ιστού που ξαναγράφει δυναμικά μια υπάρχουσα ιστοσελίδα με νέες πληροφορίες από τον διακομιστή ιστού.

Σε μια εφαρμογή React, τα στοιχεία ανακτούν το περιεχόμενο του ιστότοπου και το αποδίδουν σε ένα μόνο αρχείο HTML στο έργο σας.

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

Πώς να εγκαταστήσετε το React Router

Για να εγκαταστήσετε το React Router στο έργο σας React χρησιμοποιώντας npm, ο διαχειριστής πακέτων JavaScript, εκτελέστε την ακόλουθη εντολή στον κατάλογο του έργου σας:

npm i react-router-dom

Εναλλακτικά, μπορείτε να κάνετε λήψη του πακέτου χρησιμοποιώντας το Yarn, έναν διαχειριστή πακέτων που σας επιτρέπει να εγκαταστήσετε πακέτα βιβλιοθήκης εκτός σύνδεσης.

Για να εγκαταστήσετε το React Router χρησιμοποιώντας το Yarn, εκτελέστε αυτήν την εντολή:

νήμα προσθήκη react-router-dom@6

Ρύθμιση του δρομολογητή React

Για να διαμορφώσετε το React Router και να το κάνετε διαθέσιμο στην εφαρμογή σας, πραγματοποιήστε εισαγωγή BrowserRouter από react-router-dom μέσα σου index.js αρχείο και, στη συνέχεια, τυλίξτε το στοιχείο της εφαρμογής σας στο BrowserRouter στοιχείο:

εισαγωγή Αντιδρώ από'αντιδρώ';
εισαγωγή ReactDOM από'react-dom/client'; 
εισαγωγή App από'./Εφαρμογή';
εισαγωγή { BrowserRouter } από'react-router-dom';
συνθ root = ReactDOM.createRoot( έγγραφο.getElementById('ρίζα') );
root.render(


 </BrowserRouter>
);

Αναδίπλωση του στοιχείου της εφαρμογής στο BrowserRouter στοιχείο δίνει σε ολόκληρη την εφαρμογή πλήρη πρόσβαση στις δυνατότητες του δρομολογητή.

Δρομολόγηση σε άλλα στοιχεία

Αφού ρυθμίσετε τον δρομολογητή σας στην εφαρμογή σας, θα πρέπει να προχωρήσετε και να δημιουργήσετε τα στοιχεία της εφαρμογής σας, να τα δρομολογήσετε και να τα αποδώσετε. Ο παρακάτω κώδικας εισάγει και δημιουργεί στοιχεία που ονομάζονται "Αρχική σελίδα", "Πληροφορίες" και "Ιστολόγιο". Επίσης εισάγει το Διαδρομή και Διαδρομές στοιχεία από react-router-dom.

Θα ορίσετε τις διαδρομές σας μέσα στο App συστατικό:

εισαγωγή { Διαδρομές, Διαδρομή } από'react-router-dom';
εισαγωγή Σπίτι από'./Σπίτι';
εισαγωγή Σχετικά με από'./Σχετικά με';
εισαγωγή Ιστολόγιο από'./Blog';
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (

'/' στοιχείο ={ } />
'/σχετικά με' στοιχείο ={ } />
'/blog' στοιχείο ={ }/>
 </Routes>
 )
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

ο App Το στοιχείο είναι το κύριο στοιχείο που αποδίδει όλο τον κώδικα που έχετε γράψει στα άλλα στοιχεία σας.

ο Διαδρομές στοιχείο είναι το γονικό στοιχείο που αναδιπλώνει τις μεμονωμένες διαδρομές που δημιουργείτε στο στοιχείο της εφαρμογής σας. ο Διαδρομή στοιχείο δημιουργεί μια ενιαία διαδρομή. Χρειάζεται δύο χαρακτηριστικά prop: α μονοπάτι και ένα στοιχείο.

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

ο στοιχείο Το χαρακτηριστικό ορίζει το στοιχείο που το Διαδρομή θα αποδώσει.

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

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

εισαγωγή { Σύνδεσμος } από'react-router-dom';
λειτουργίαΣπίτι() {
ΕΠΙΣΤΡΟΦΗ (



'/σχετικά με'>Σχετικά με τη σελίδα</Link>
'/blog'>Σελίδα ιστολογίου</Link>
Αυτή είναι η Αρχική Σελίδα
 </div>
 )
}
εξαγωγήΠροκαθορισμένο Σπίτι;

ο Σύνδεσμος το στοιχείο είναι σχεδόν πανομοιότυπο με την ετικέτα αγκύρωσης HTML, χρησιμοποιεί απλώς ένα χαρακτηριστικό που ονομάζεται "to" αντί για "href". ο Σύνδεσμος Το στοιχείο πλοηγείται στη Διαδρομή με το αντίστοιχο όνομα διαδρομής ως χαρακτηριστικό του και αποδίδει το στοιχείο της Διαδρομής.

Nested Routing και πώς να το εφαρμόσετε

Ο δρομολογητής React υποστηρίζει ένθετη δρομολόγηση, επιτρέποντάς σας να τυλίξετε πολλές διαδρομές σε μία μόνο διαδρομή. Αυτό χρησιμοποιείται κυρίως όταν υπάρχει κάποια ομοιότητα στις διαδρομές URL των Διαδρομών.

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

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

εισαγωγή { Διαδρομές, Διαδρομή } από'react-router-dom'; 
εισαγωγή Άρθρα από"./Άρθρα";
εισαγωγή NewArticle από'./NewArticle';
εισαγωγή Άρθρο Πρώτο από'./ArticleOne';
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (

'/άρθρο' στοιχείο ={ }/>
'/άρθρο/νέο' στοιχείο ={ }/>
'/Άρθρο 1' στοιχείο ={ }/>
 </Routes>
 )
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Το μπλοκ κώδικα παραπάνω εισάγει και δρομολογεί τα δημιουργημένα στοιχεία Άρθρα, NewArticle, και Άρθρο Πρώτο. Υπάρχουν κάποιες ομοιότητες στις διαδρομές URL μεταξύ των τριών διαδρομών.

ο NewArticle Το όνομα διαδρομής της διαδρομής ξεκινά το ίδιο με το Άρθρα Το όνομα διαδρομής της διαδρομής, με πρόσθετη ανάστροφη κάθετο (/) και τη λέξη "new", δηλαδή (/new). Η μόνη διαφορά μεταξύ των ονομάτων διαδρομής του Άρθρα Διαδρομή και το Άρθρο Πρώτο Διαδρομή είναι η κάθετο (/1) στο τέλος του Άρθρο Πρώτο όνομα διαδρομής στοιχείου.

Μπορείτε να τοποθετήσετε τις τρεις διαδρομές αντί να τις αφήσετε στην τρέχουσα κατάστασή τους.

Όπως έτσι:

εισαγωγή { Διαδρομές, Διαδρομή } από'react-router-dom';
εισαγωγή Άρθρα από"./Άρθρα";
εισαγωγή NewArticle από'./NewArticle';
εισαγωγή Άρθρο Πρώτο από'./ArticleOne';
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (

'/άρθρο'>
 }/>
'/άρθρο/νέο' στοιχείο ={ }/>
'/Άρθρο 1' στοιχείο ={ }/>
 </Route>
 </Routes>
 )
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Έχετε τυλίξει τις τρεις μεμονωμένες διαδρομές σε μία Διαδρομή στοιχείο. Σημειώστε ότι ο γονιός Διαδρομή στοιχείο έχει μόνο το μονοπάτι χαρακτηριστικό και αρ στοιχείο χαρακτηριστικό που ορίζει το στοιχείο προς απόδοση. ο δείκτης χαρακτηριστικό στο πρώτο παιδί Διαδρομή στοιχείο ορίζει ότι αυτό Διαδρομή αποδίδεται όταν πλοηγείστε στη διαδρομή URL του γονέα Διαδρομή.

Για να κάνετε τον κώδικά σας καλύτερο και πιο διατηρήσιμο, θα πρέπει να ορίσετε τις διαδρομές σας σε ένα στοιχείο και να το εισαγάγετε στο εφαρμογή εξάρτημα για χρήση.

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

εισαγωγή { Διαδρομές, Διαδρομή } από'react-router-dom';
εισαγωγή Άρθρα από"./Άρθρα";
εισαγωγή NewArticle από'./NewArticle';
εισαγωγή Άρθρο Πρώτο από'./ArticleOne';
λειτουργίαΆρθροΔιαδρομές() {
ΕΠΙΣΤΡΟΦΗ (

 }/>
'/άρθρο/νέο' στοιχείο ={ }/>
'/Άρθρο 1' στοιχείο ={ }/>
 </Routes>
 )
}
εξαγωγήΠροκαθορισμένο ΆρθροΔιαδρομές;

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

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

εισαγωγή { Διαδρομές, Διαδρομή } από'react-router-dom';
εισαγωγή ΆρθροΔιαδρομές από"./ArticleRoutes";
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (

'/άρθρο/*' στοιχείο ={ }>
 </Routes>
 )
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?

Στον τελικό Διαδρομή συστατικό, η πρόσθετη ανάστροφη κάθετο και τα σύμβολα αστερίσκου στο τέλος του ονόματος διαδρομής της διαδρομής διασφαλίζουν ότι το όνομα διαδρομής αντιστοιχεί σε οποιοδήποτε όνομα διαδρομής που ξεκινά με (/άρθρο).

Υπάρχουν περισσότερα για να React Router

Θα πρέπει τώρα να είστε εξοικειωμένοι με τα βασικά για τον τρόπο δημιουργίας εφαρμογών μιας σελίδας στο React.js, χρησιμοποιώντας το React Router.

Υπάρχουν πολλές περισσότερες διαθέσιμες λειτουργίες στη βιβλιοθήκη του React Router που κάνουν την εμπειρία του προγραμματιστή πιο δυναμική κατά τη δημιουργία εφαρμογών web.