Μάθετε το React Router σε 5 λεπτά - Ένα εκπαιδευτικό για αρχάριους

Μερικές φορές έχετε μόνο 5 λεπτά για να απομείνει. Αντί να τα σπαταλάμε στα κοινωνικά μέσα, ας κάνουμε μια εισαγωγή 5 λεπτών στο React-Router! Σε αυτό το σεμινάριο, θα μάθουμε τα βασικά της δρομολόγησης στο React δημιουργώντας πλοήγηση για έναν ιστότοπο καταστημάτων πλεκτών Scrimba. Δεν είναι πραγματικό, αλλά ίσως μια μέρα ...;)

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

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

Πολλοί σύγχρονοι ιστότοποι αποτελούνται πραγματικά από μία μόνο σελίδα, μοιάζουν με πολλές σελίδες επειδή περιέχουν στοιχεία που αποδίδονται σαν ξεχωριστές σελίδες. Αυτά είναι συνήθως αναφέρεται ως ΖΕΠ - s ingle- σ ηλικία ένα ι αιτήσεις. Στον πυρήνα του, αυτό που κάνει το React Router καθιστά υπό όρους ορισμένα στοιχεία προς εμφάνιση ανάλογα με τη διαδρομή που χρησιμοποιείται στη διεύθυνση URL ( /για την αρχική σελίδα, /aboutγια τη σελίδα σχετικά, κ.λπ.).

Για παράδειγμα, μπορούμε να χρησιμοποιήσουμε το React Router για να συνδέσουμε το www.knit-with-scrimba.com/ στο www.knit-with-scrimba.com/about ή το www.knit-with-scrimba.com/shop

Ακούγεται υπέροχο - πώς το χρησιμοποιώ;

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

npm install react-router-dom 

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

Θα πρέπει να εισαγάγετε BrowserRouter, Route και Switch from react-router-dompackage:

import React, { Component } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

Στο παράδειγμά μου, μπορώ να συνδέσω τη σελίδα προορισμού με δύο άλλους «σελίδες» (το οποίο είναι στην πραγματικότητα απλά συστατικά) που ονομάζεται Shopκαι About.

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

// index.js ReactDOM.render(   , document.getElementById('root') ) 

Στη συνέχεια, στο στοιχείο της εφαρμογής σας, προσθέστε το Switchστοιχείο (ετικέτες ανοίγματος και κλεισίματος). Αυτά διασφαλίζουν ότι αποδίδεται μόνο ένα στοιχείο κάθε φορά. Εάν δεν το χρησιμοποιούμε, μπορούμε να ορίσουμε από προεπιλογή το Errorστοιχείο, το οποίο θα γράψουμε αργότερα.

function App() { return (     ) } 

Ήρθε η ώρα να προσθέσετε τις ετικέτες σας . Αυτοί είναι οι σύνδεσμοι μεταξύ των στοιχείων και πρέπει να τοποθετούνται μέσα στις ετικέτες.

Για να πείτε στις ετικέτες ποιο στοιχείο θα φορτώσει, απλώς προσθέστε ένα pathχαρακτηριστικό και το όνομα του στοιχείου που θέλετε να φορτώσετε με το componentχαρακτηριστικό.

Πολλές διευθύνσεις URL της αρχικής σελίδας είναι το όνομα του ιστότοπου που ακολουθείται "/", για παράδειγμα, από το www.knit-with-scrimba.com/ . Σε αυτήν την περίπτωση, προσθέτουμε exactστην ετικέτα Route. Αυτό συμβαίνει επειδή οι άλλες διευθύνσεις URL περιέχουν επίσης "/", οπότε αν δεν πούμε στην εφαρμογή ότι πρέπει να ψάξει ακριβώς /, φορτώνει την πρώτη που ταιριάζει με τη διαδρομή και αντιμετωπίζουμε ένα αρκετά δύσκολο σφάλμα.

function App() { return (        ) } 

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

import Home from './components/Home'; import About from './components/About'; import Shop from './components/Shop'; 

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

Oops! Page not found!

. Μην ξεχάσετε να το εισαγάγετε στην εφαρμογή.

function App() { return (         ) } 

Μέχρι στιγμής, ο ιστότοπός μας έχει δυνατότητα πλοήγησης πληκτρολογώντας μόνο τις διευθύνσεις URL. Για να προσθέσουμε συνδέσμους με δυνατότητα κλικ στον ιστότοπο, χρησιμοποιούμε το Linkστοιχείο από το React Router και δημιουργούμε ένα νέο Navbarστοιχείο. Για άλλη μια φορά, μην ξεχάσετε να εισαγάγετε το νέο στοιχείο στην εφαρμογή.

Τώρα προσθέστε ένα Linkγια κάθε στοιχείο στην εφαρμογή και χρησιμοποιήστε το to="URL"για να τα συνδέσετε.

function Navbar() { return ( Home  About Us  Shop Now ); }; 

Ο ιστότοπός σας διαθέτει πλέον συνδέσμους με δυνατότητα κλικ που μπορούν να σας περιηγηθούν στην εφαρμογή μιας σελίδας!

συμπέρασμα

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

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

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

Καλή κωδικοποίηση;)