Ο οδηγός του Hitchhiker για να αντιδράσετε το δρομολογητή v4: Grok React Router σε 20 λεπτά

Γεια σας, React Hitchhiker! Θέλετε μια βόλτα στο React Router; Πήγαινε μέσα. Πάμε!

Για να κατανοήσουμε τη φιλοσοφία πίσω από το React Router, πρέπει να γνωρίζουμε τι είναι μια εφαρμογή μίας σελίδας (SPA).

Τι είναι μια εφαρμογή μίας σελίδας;

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

Γιατί είναι τόσο καλό ;!

1. αποφεύγει τη διακοπή της εμπειρίας χρήστη μεταξύ διαδοχικών σελίδων

2. κάνει την εφαρμογή να συμπεριφέρεται περισσότερο σαν εφαρμογή επιτραπέζιου υπολογιστή

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

4. επειδή είναι kewl και kewl και εξαιρετικά-ευρεία-4K-επίπεδο-of-kewl. ;

Τα SPA είναι πλέον ένα βιομηχανικό πρότυπο και πολλές εταιρείες προσπαθούν να βρουν προγραμματιστές για να αναπτύξουν τα έργα τους.

Τι είναι το React Router;

Το React Router είναι ένα εργαλείο που σας επιτρέπει να χειρίζεστε διαδρομές.

Δεδομένου ότι ασχολείστε με ένα SPA, χρειάζεστε έναν τρόπο για να ενεργοποιήσετε τα περιεχόμενα που φορτώνονται στην οθόνη. Το React Router εισάγει μια ιδέα που ονομάζεται «Δυναμική Δρομολόγηση», η οποία είναι πολύ διαφορετική από τη «Στατική Δρομολόγηση» που έχουμε συνηθίσει.

Όταν ασχολείστε με το "Static Routing" δηλώνετε τις διαδρομές σας ως μέρος της προετοιμασίας της εφαρμογής σας πριν πραγματοποιηθεί οποιαδήποτε απόδοση (Rails, Express, Ember, Angular και ούτω καθεξής).

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

Το React Router v4 υποστηρίζει και εφαρμόζει μια προσέγγιση που βασίζεται σε στοιχεία για τη δρομολόγηση.

Παρέχει διαφορετικά στοιχεία δρομολόγησης ανάλογα με τις ανάγκες της εφαρμογής και της πλατφόρμας.

Σε αυτήν τη συγκεκριμένη περίπτωση πρόκειται να εξερευνήσουμε   επειδή θέλουμε να χρησιμοποιήσουμε τη "δυναμική δρομολόγηση" σε περιβάλλον "εφαρμογή Ιστού" και να αφήσουμε τα άλλα για άλλες περιστάσεις

Ποιος δημιούργησε το React Router;

Αυτά τα δύο καταπληκτικά ανθρώπινα όντα, ο Μάικλ Τζάκσον και ο Ράιαν Φλωρεντία. Και αξίζουν φορτία, τόνους χειροκρότημα! Μαζί ξεκίνησαν το React Training.

Σήμερα, διορθώστε με αν κάνω λάθος, ακολούθησαν ξεχωριστές διαδρομές:

Ο Μάικλ Τζάκσον συνεχίζει να αναπτύσσει το React Training.

Ο Ryan Florence δημιούργησε το Reach.Tech.

Έχει ο React Router κάτι να κάνει με το Redux;

Όχι. Αν και συνήθως εμφανίζονται μαζί.

Είσαι σίγουρος? Ναί ? Είμαι σίγουρος ?

Είναι και τα δύο υπέροχα και απαραίτητα εργαλεία και καθώς είναι Συστήματα Ανώτερης Παραγγελίας (βασικά λειτουργίες JavaScript που παίρνουν ένα Εξάρτημα και επιστρέφουν ένα νέο), οπότε είναι συνηθισμένο να τα βρίσκετε «σύνθετα» μαζί.

Ρύθμιση, ας βάλουμε τα χέρια μας βρώμικα

Για να σας καθοδηγήσουμε σε αυτήν τη διαδικασία, θα χρησιμοποιήσουμε τη Δημιουργία εφαρμογής React (CRA).

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

Εάν κατά πάσα πιθανότητα η εφαρμογή React ή Δημιουργία React είναι πέρα ​​από την αντίληψή σας, σας προτείνω να μπείτε πρώτα σε αυτές και στη συνέχεια να επιστρέψετε με ένα φλιτζάνι καφέ.

Εντάξει, σε όσους στάθηκαν μαζί μου: μετά την εγκατάσταση του CRA, πρέπει να εγκαταστήσετε το πακέτο react-router.

Εάν χρησιμοποιείτε το npm απλώς ανοίξτε το τερματικό σας, μεταβείτε στο φάκελο CRA και πληκτρολογήστε:

npm i -S react-router-dom

ή

yarn add react-router-dom-εάν χρησιμοποιείτε νήματα ως διαχειριστή πακέτων.

Απλώς για να ελέγξετε το πακέτο σας.jsonκαι βεβαιωθείτε ότι όλα είναι εντάξει, εδώ είναι το δικό μου:

Όπως μπορείτε να δείτε; σε αυτό το σημείο έχουμε την αντίδραση-router-dom ως εξάρτηση.

Έγινε, έναρξη npm ή νήμα και…

Πάταγος! Πηγαίνουμε Μα!

Η εφαρμογή που χτίζουμε

Ας κάνουμε έναν απλό προσωπικό ιστότοπο με μια γραμμή πλοήγησης που επιτρέπει στο χρήστη να εναλλάσσει περιεχόμενο. Ο ιστότοπός μας θα έχει τρεις κύριες ενότητες που ονομάζονται Home , About και Topics .

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

Βλέπετε τη διεύθυνση URL του προγράμματος περιήγησης: localhost: 3000 / home στο παρακάτω στιγμιότυπο οθόνης;

Σημαίνει ότι ενεργοποιείται η διαδρομή Home και αποδίδεται η προβολή Home .

Αυτό θα είναι το τελικό μας αποτέλεσμα:

Και αυτό…;, αυτός είναι ένας ιστότοπος;

; Ναι είναι!

Γυμνό! Απλά προσπαθήστε να μην αισθάνεστε προκατάληψη σε άλλες πολυπλοκότητες όπως το στυλ και ούτω καθεξής! Δεν θέλω να αποσπάται η προσοχή σας με οτιδήποτε άλλο εκτός από το grokking πόσο απλό είναι να εφαρμόσετε το React Router v4 .

Λοιπόν, αφού ανακάμψετε από το σοκ, ας κάνουμε το επόμενο βήμα και δείτε το αρχείο /src/index.js.

/src/index.js

index.js είναι το πρώτο αρχείο που φορτώνεται από το CRA, το σημείο εκκίνησης όλων των εφαρμογών σας.

Ας ρίξουμε μια ματιά σε αυτό που έχω κάνει:

Τι κάνουμε λοιπόν εδώ;

  • Εισάγουμε το στοιχείο από την εξάρτηση που έχουμε εγκαταστήσει και δηλώνοντας ότι θα το ονομάσουμε από αυτό το σημείο και εξής:

import { BrowserRouter as Router } from ‘react-router-dom’;

  • Εισάγουμε ένα συστατικό στοιχείο, που δημιουργήθηκε από εμένα, με τις διαδρομές που θα χρησιμοποιήσουμε στον ιστότοπό μας - μην ανησυχείτε τώρα με αυτό το στοιχείο:

import { Routes } from ‘./routes’;

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

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

  • Αγκαλιάζουμε με το συστατικό.

Στην πραγματικότητα, λειτουργεί ως Ανώτατο Τάγμα Συστατικού που γνωρίζει μόνο τα παιδιά του στο μέλλον και αλληλεπιδρά μαζί τους σε ένα ευρύτερο πεδίο, ανεξάρτητα από το ποιος και πόσα είναι.

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

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

Com Ponent

Βασικά λοιπόν τι κάνει το rout.js ;

Ξεκινάει με την εισαγωγή του React και μερικά στοιχεία θα ρίξουμε μια ματιά αργότερα. Απλώς σκεφτείτε τα ως απλά στοιχεία χωρίς κατάσταση: Home , About , TopicList , TopicDetail , NavBar και NoMatch .

Εισάγει επίσης τρία στοιχεία από το πακέτο react-router-dom τα οποία θα πρέπει να επικαλεστούμε:, και .

Μετά τις εισαγωγές, εξάγουμε τις απάτριδες συνιστώσες Routes που επικαλούνται το NavBar(που θα είναι πάντα στην οθόνη) και a συστατικό.

Τι κάνει αυτός ο τύπος;

Αυτό το στοιχείο καθιστά βασικά το πρώτο παιδί ή που ταιριάζει με την τοποθεσία του προγράμματος περιήγησης.

Αρχίζει να δοκιμάζει τέτοια πράγματα: «είναι το URL του προγράμματος περιήγησης σε αυτό μονοπάτι? Οχι? Εντάξει." Επόμενη διαδρομή «Είναι η διεύθυνση URL του προγράμματος περιήγησης σε αυτήν την άλλη διαδρομή διαδρομής; Οχι."

Επόμενη διαδρομή "ΑΑ καταλαβα! Είναι σε αυτό, ας ενεργοποιήσουμε την απόδοση του Component και να ολοκληρώσουμε τον έλεγχο μέχρι τώρα (δεν με νοιάζει με τις άλλες διαδρομές παρακάτω ...) "

Εάν συμβεί κάτι τέτοιο:

η δεύτερη διαδρομή δεν θα ενεργοποιηθεί ποτέ γιατί ο διακόπτης θα πηδήξει πριν φτάσει σε αυτό. Απλώς πηγαίνει για καφέ ... (και εγώ επίσης !!!; Επιστροφή!)

Μέσα ορίζουμε το καθένα .

Καθε το λέει στο πρόγραμμα περιήγησης:

«Γεια σου πρόγραμμα περιήγησης DOM! Αν με επιλέγει επειδή η τοποθεσία σας είναι (ακριβώς) αυτή, παρακαλώ δώστε το ακόλουθο στοιχείο ».

Ή σε άλλες περιπτώσεις όπως η παρακάτω, λέει:

«Γεια σου, πρόγραμμα περιήγησης, αν σε κάθε περίπτωση το δικό σου με επέλεξε επειδή η τοποθεσία είναι / Θέματα / "κάτι" καθιστούν το στοιχείο του στοιχείου. Σίγουρα θα ανακαλύψει ποιος είναι αυτό: topicId (μεταβλητή) πράγμα που ο χρήστης μας ζητά να ταιριάξουμε και να το δρομολογήσουμε ανάλογα ».

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

Αυτή η τελευταία διαδρομή απλώς αποδίδει μια προεπιλεγμένη σελίδα που δηλώνει ότι δεν υπάρχει αντιστοίχιση διαδρομής, είδος σφάλματος HTTP 404.

Θυμηθείτε ότι εδώ ασχολούμαστε με ένα SPA και το "Dynamic Routing", οπότε πρόκειται για μια προσομοίωση σαν να απαιτούσαμε διαδρομές προς έναν διακομιστή; Στην πραγματικότητα δεν είμαστε!

Απλώς δεν ξέρουμε τι να κάνουμε εάν ο χρήστης, για παράδειγμα, εισάγει κάτι που δεν ταιριάζει στη διεύθυνση URL όπως αυτό: // localhost: 3000 / HelloWorld .

Καθώς αυτή η διαδρομή δεν καθορίστηκε, παρέχουμε ένα στοιχείο NoMatch για να τους ενημερώσουμε για τη μη ύπαρξη της διαδρομής.

υπάρχει επειδή εάν ο χρήστης προσπαθήσει να φορτώσει τη διεύθυνση URL χωρίς καμία διαδρομή // localhost: 3000 / , θα λάβει ένα NoMatch επειδή δεν έχει καθοριστεί διαδρομή για αυτό. Έτσι, ο καλύτερος τρόπος για να το χειριστείτε είναι να χρησιμοποιήσετε  και σπρώξτε τον χρήστη στη διαδρομή του / Home που είναι από προεπιλογή η πρώτη οθόνη της εφαρμογής μας.

Γιατί είναι απαραίτητο;

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

Προβολές ή / και στοιχεία

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

Όταν είμαστε «Σκέφτομαι στο Αντιδραστικό» και αρχίζουμε να κάνουμε μια εφαρμογή, και αρχίζει να μεγαλώνει, μερικές φορές σταματάμε επειδή αισθανόμαστε ότι τα πράγματα δεν είναι στο σωστό μέρος.

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

Οι προβολές και τα στοιχεία είναι πράγματα που είναι ζωγραφισμένα στην οθόνη. Λοιπόν, τι διαφοροποιεί το ένα πράγμα από το άλλο;

Και οι προβολές δεν αποτελούν στοιχεία; Και τα στοιχεία δεν είναι προβολές;

Λοιπόν, όσον αφορά τη γλώσσα κωδικοποίησης, μια προβολή και ένα στοιχείο είναι σίγουρα συναρτήσεις ή κλάσεις - στοιχεία χωρίς κατάσταση ή στοιχεία stateful όπως το αποκαλούμε στο React lingo.

Τι τους διαφοροποιεί λοιπόν;

Λοιπόν, μια θέα έχει μια διαδρομή. Μέσα σε αυτήν την Προβολή μπορείτε να αποδώσετε πολλά στοιχεία.

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

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

Ας ρίξουμε μια ματιά στη δομή φακέλων CRA μου:

Έτσι, όπως βλέπετε εγώ - και το 99% του κόσμου - μου αρέσει να κρατάω πορτοκάλια και αχλάδια σε διαφορετικά καλάθια. Και εσείς! Εχω πίστη σε 'σένα! Σε εμπιστεύομαι!

Υπάρχουν πολλά μοτίβα για το πώς να οργανώσετε αυτό το υλικό και ξεκινά πολλή συζήτηση όταν παρουσιάζουμε περισσότερα πακέτα όπως το Redux που μεταμορφώνουν λίγο την αρχιτεκτονική της εφαρμογής ή όταν θέλουμε να ζωγραφίσουμε στην οθόνη Πίνακες ελέγχου, Widgets, Ποδηλασία Χοίροι ή περισσότερα παράξενα πράγματα…

Όμως, για να διαφοροποιήσετε τις έννοιες, ρίξτε μια προσεκτική ματιά στις Προβολές και τα Στοιχεία.

Το Home , About , TopicList και NoMatch είναι προβολές. Έχουν τις δικές τους σωστές διαδρομές που τις ενεργοποιούν.

Το NavBar είναι ένα πανταχού παρόν στοιχείο που χρησιμοποιείται πάντα. Δεν έχει διαδρομή.

Το TopicDetails είναι ένα στοιχείο που θα εμφανίζει πληροφορίες θέματος όταν ενεργοποιείται η διαδρομή TopicList /: topicId . Είναι ένα επαναχρησιμοποιήσιμο συστατικό που μπορεί να εισαχθεί σε άλλα μέρη και να ανακατασκευαστεί ή να επεκταθεί. Δεν έχει συγκεκριμένη διαδρομή.

Το σπίτι / Σχετικά με τις προβολές

Μέσα στο φάκελο Home, έχω ένα index.js και ένα αρχείο Home.js.

Η ύπαρξη index.js για εξαγωγή των άλλων αρχείων είναι καλή πρακτική. Απλά εμπιστευτείτε με ή φέρετε λίγο κρασί γιατί θα είναι μια μακρά συζήτηση;

… Ας πιούμε απλώς το κρασί και θα μιλήσουμε αργότερα! ;

Αυτή είναι μια απλή άποψη που εξάγει μόνο τον τίτλο της. Η προβολή Σχετικά είναι ίδια με αυτήν.

Τώρα ας ρίξουμε μια ματιά στο TopicList View επειδή είναι λίγο διαφορετικό.

Προβολές λίστας θέματος και θέματος

Έτσι το TopicList View έχει αυτή τη λεπτομέρεια χειρισμού διαφορετικών διαδρομών. Θυμηθείτε ότι / Topic /: topicId διαδρομή αυτό είπε να αφήσετε το TopicDetail να χειριστεί;

Εδώ είμαστε με αυτό.

Το TopicList λαμβάνει το {match} ως στήριγμα. Μην αφήσετε τη λειτουργία καταστροφής να σας τρομάξει. Θα μπορούσαμε απλώς να λάβουμε στηρίγματα και να καλέσουμε το props.match . Αυτός είναι ο τρόπος με τον οποίο όλα τα δροσερά παιδιά σήμερα καταστρέφουν τα στηρίγματα για να βελτιώσουν την αναγνωσιμότητα και τη ροή αντιδράσεων. Μου αρέσει επίσης πολύ! Αυτό είναι σαν να σηκώνετε ένα κουτί με το κινητό σας στο εσωτερικό ή να παίρνετε το κινητό απευθείας. Στην πραγματικότητα διατηρήθηκε μέσα στο κουτί, αλλά αυτή τη στιγμή θα πρέπει να ελέγξετε το e-mail σας άφησε λοιπόν το κουτί να παραμείνει εκεί που είναι! Μην το φέρετε μαζί σας στη δουλειά!

Τέλος πάντων, ας επικεντρωθούμε στον κώδικα.

Σε αυτό το αρχείο, εισάγουμε ένα στοιχείο από το React Router που ονομάζεται {Link} επειδή θέλουμε να δημιουργήσουμε συνδέσμους;

Λαμβάνουμε έναν αγώνα από τη Διαδρομή που επιλέξαμε όταν κάναμε κλικ στα Θέματα και δίνουμε μια λίστα χωρίς ταξινόμηση με 3 επιλογές: Θέμα1 , Θέμα2 και Θέμα3 .

Βασικά, εάν ο Χρήστης επιλέξει Link Topic1 στην οθόνη, τοθα προωθήσει τη διεύθυνση URL του προγράμματος περιήγησης σε αυτήν τη διαδρομή / Θέματα / Θέμα1 .

Τι συμβαίνει μετά? και εντοπίστε ότι η διεύθυνση URL άλλαξε και ρίξτε μια ματιά στις πληροφορίες τους για να ελέγξετε ποια διαδρομή πρέπει να ενεργοποιηθεί. Έτσι ανακαλύπτουν ότι τώρα η διαδρομή που ενεργοποιείται είναι «αυτή για / Topics /: topicId και ενεργοποιεί την απόδοση TopicDetail . Το TopicDetail θα εμφανίσει λεπτομέρειες Topic1 .

Το TopicDetail λαμβάνει αντιστοιχία από το Router και αποδίδει το topicId που βρίσκεται στο match.params.topicId .

Το στοιχείο NavBar

Το στοιχείο NavBar έχει έναν ειδικό ρόλο εδώ επειδή είναι πανταχού παρόν.

Η λειτουργία του είναι να επιτρέπει στον χρήστη να πλοηγείται στον ιστότοπο και να δείχνει τις διαθέσιμες ενότητες (διαδρομές).

Όπως έχετε δει στην αρχή, είναι μέσα αλλά έξω οπότε οποιαδήποτε προβολή θα συντίθεται πάντα με το NavBar στην κορυφή.

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

Τελευταίο αλλά εξίσου σημαντικό

Νομίζω ότι αυτή τη στιγμή έχετε πιθανώς μια βασική κατανόηση του τρόπου λειτουργίας του React Router και μπορεί να χρησιμοποιηθεί για την πραγματοποίηση ενός απλού ιστότοπου.

Αν θέλετε να ελέγξετε τον κωδικό ή να τον δοκιμάσετε, μπορείτε να τραβήξετε το ρεπό μου, διαθέσιμο στο GitHub.

Βιβλιογραφία

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

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

Αυτό το άρθρο είναι μέρος 1 μιας σειράς που ονομάζεται "Οδηγός Hitchhiker για να αντιδράσετε το Router v4." Τα μέρη 2–4 έρχονται στο freeCodeCamp όλη αυτή την εβδομάδα!

  • Μέρος II: [αγώνα, τοποθεσία, ιστορικό] - οι καλύτεροι φίλοι σας!
  • Μέρος III: αναδρομικές διαδρομές, στο άπειρο και πέρα!
  • Μέρος IV: διαμόρφωση διαδρομής, η κρυφή τιμή καθορισμού ενός πίνακα διαμόρφωσης διαδρομής

Ευχαριστώ πολύ!