React Router Tutorial - Πώς να κάνετε Render, Redirect, Switch, Link και άλλα, με παραδείγματα κώδικα

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

Παραδοσιακά, η δρομολόγηση λειτουργεί ως εξής: ας υποθέσουμε ότι πληκτρολογείτε /contactτη διεύθυνση URL. Το πρόγραμμα περιήγησης θα υποβάλει αίτημα GET στον διακομιστή και ο διακομιστής θα επιστρέψει μια σελίδα HTML ως απόκριση.

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

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

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

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

Ρυθμίστε το έργο

Δημιουργήστε ένα νέο έργο React εκτελώντας την ακόλουθη εντολή.

yarn create react-app react-router-demo

Θα χρησιμοποιήσω νήματα για να εγκαταστήσω τις εξαρτήσεις, αλλά μπορείτε επίσης να χρησιμοποιήσετε το npm.

Στη συνέχεια, ας εγκαταστήσουμε react-router-dom.

yarn add react-router-dom

Για το στυλ των εξαρτημάτων, θα χρησιμοποιήσω το πλαίσιο Bulma CSS. Ας το προσθέσουμε επίσης.

yarn add bulma

Στη συνέχεια, εισαγάγετε bulma.min.cssστο index.jsαρχείο και καθαρίστε όλο τον κωδικό boilerplate από το App.jsαρχείο.

import "bulma/css/bulma.min.css";

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

Δημιουργία στοιχείων της σελίδας

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

Για αυτήν την επίδειξη, δημιουργήστε τρεις σελίδες - Αρχική σελίδα, Σχετικά και Προφίλ.

Επικολλήστε τα ακόλουθα μέσα στα στοιχεία Home και About.

// pages/Home.js import React from "react"; const Home = () => ( 

This is the Home Page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida, risus at dapibus aliquet, elit quam scelerisque tortor, nec accumsan eros nulla interdum justo. Pellentesque dignissim, sapien et congue rutrum, lorem tortor dapibus turpis, sit amet vestibulum eros mi et odio.

); export default Home;
// pages/About.js import React from "react"; const About = () => ( 

This is the About Page

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis consequat nulla ac ex consequat, in efficitur arcu congue. Nam fermentum commodo egestas.

); export default About;

Θα δημιουργήσουμε τη σελίδα Προφίλ αργότερα στο άρθρο.

Δημιουργήστε το Navbar Component

Ας ξεκινήσουμε δημιουργώντας τη γραμμή πλοήγησης για την εφαρμογή μας. Αυτό το στοιχείο θα κάνει χρήση του στοιχείου από react-router-dom.

Δημιουργήστε έναν κατάλογο που ονομάζεται "components" μέσα στο φάκελο src.

// components/Navbar.js import React, { useState } from "react"; import { NavLink } from "react-router-dom"; const Navbar = () => { const [isOpen, setOpen] = useState(false); return ( {/* ... */} ); }; export default Navbar;

Η isOpenμεταβλητή κατάστασης θα χρησιμοποιηθεί για την ενεργοποίηση του μενού σε κινητές συσκευές ή συσκευές tablet.

Ας προσθέσουμε λοιπόν το μενού χάμπουργκερ.

const Navbar = () => { const [isOpen, setOpen] = useState(false); return ( setOpen(!isOpen)} > {/* ... */} ); };

Για να προσθέσετε το σύνδεσμο στο μενού, χρησιμοποιήστε το στοιχείο από react-router-dom.

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

Για να καθορίσετε σε ποια διαδρομή θα πλοηγηθείτε, χρησιμοποιήστε το toστήριγμα και περάστε το όνομα της διαδρομής.

Το activeClassNameστήριγμα θα προσθέσει μια ενεργή κλάση στον σύνδεσμο εάν είναι αυτήν τη στιγμή ενεργή.

 Home 

Στο πρόγραμμα περιήγησης, το NavLinkστοιχείο αποδίδεται ως ετικέτα με hrefτιμή χαρακτηριστικού που μεταβιβάστηκε στο toστήριγμα.

Επίσης, εδώ πρέπει να καθορίσετε το exactστήριγμα έτσι ώστε να ταιριάζει ακριβώς με τη διεύθυνση URL.

Προσθέστε όλους τους συνδέσμους και ολοκληρώστε το Navbarστοιχείο.

import React, { useState } from "react"; import { NavLink } from "react-router-dom"; const Navbar = () => { const [isOpen, setOpen] = useState(false); return ( setOpen(!isOpen)} > Home   About   Profile Log in ); }; export default Navbar; 

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

Απόδοση των σελίδων

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

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

// App.js function App() { return ( {/* Render the page here */} ); }

Τώρα, προσθέστε τα στοιχεία της σελίδας στο εσωτερικό του κοντέινερ.

// App.js function App() { return ( ); }

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

You need to import the BrowserRouter component from React Router to add the ability to route the components. All you need to do is wrap all the page components inside of the BrowserRouter component. This will enable all the page components to have the routing logic. Perfect!

But again, nothing's going to change with the results – you are still going to see both the pages rendered. You need to render the page component only if the URL matches a particular path. That's where the Route component from React Router comes into play.

The Router component has a path prop that accepts the page's path, and the page component should be wrapped with the Router, as shown below.

So let's do the same for the Home component.

The exact prop above tells the Router component to match the path exactly. If you don't add the exact prop on the / path, it will match with all the routes starting with a / including /about.

If you go check out the results now, you'll still see both the components rendered. But, if you go to /about, you'll notice that only the About component gets rendered. You see this behavior because the router keeps matching the URL with the routes even after it had matched a route already.

We need to tell the router to stop matching further once it matches a route. This is done using the Switch component from React Router.

function App() { return ( ); }

There you go! You have successfully configured routing in your React app.

Protected Routes and Redirect

When working on Real-world applications, you will have some routes behind an authentication system. You are going to have routes or pages that can only be accessed by a logged-in user. In this section, you'll learn how to go about implementing such routes.

Please note that I'm not going to create any login form or have any back-end service authenticate the user. In a real application, you wouldn't implement authentication the way demonstrated here.

Let's create the Profile page component that should only be accessed by the authenticated user.

// pages/Profile.js import { useParams } from "react-router-dom"; const Profile = () => { const { name } = useParams(); return ( 

This is the Profile Page

{name}

Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "} Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac{" "} eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem. ); };

We will grab the user's name from the URL using route parameters.

Add the Profile route into the router.

Currently the profile page can be accessed directly. So to make it an authenticated route, create a Higher-Order component (HOC) to wrap the authentication logic.

const withAuth = (Component) => { const AuthRoute = () => { const isAuth = !!localStorage.getItem("token"); // ... }; return AuthRoute; };

To determine if a user is authenticated or not, grab the authentication token that is stored in the browser when the user logs in. If the user is not authenticated, redirect the user to the Home page. The Redirect component from React Router can be used to redirect the user to another path.

const withAuth = (Component) => { const AuthRoute = () => { const isAuth = !!localStorage.getItem("token"); if (isAuth) { return ; } else { return ; } }; return AuthRoute; };

You can also pass in other user information like name and user ID using props to the wrapped component.

Next, use the withAuth HOC in the Profile component.

import withAuth from "../components/withAuth"; const Profile = () => { // ... } export default withAuth(Profile);

Now, if you try to visit /profile/JohnDoe, you will get redirected to the Home page. That's because the authentication token is not yet set in your browser storage.

Alright, so, let's return to the Navbar component and add the login and logout functionalities. When the user is authenticated, show the Logout button and when the user is not logged in show the Login button.

// components/Navbar.js const Navbar = () => { // ... return ( {/* ... */} {!isAuth ? (  Log in  ) : (  Log out  )} ); } 

When the user clicks on the login button, set a dummy token in the local storage, and redirect the user to the profile page.

But we cannot use the Redirect component in this case – we need to redirect the user programmatically. Sensitive tokens used for authentication are usually stored in cookies for security reasons.

React Router has a withRouter HOC that injects the history object in the props of the component to leverage the History API. It also passes the updated match and location props to the wrapped component.

// components/Navbar.js import { NavLink, withRouter } from "react-router-dom"; const Navbar = ({ history }) => { const isAuth = !!localStorage.getItem("token"); const loginUser = () => { localStorage.setItem("token", "some-login-token"); history.push("/profile/Vijit"); }; const logoutUser = () => { localStorage.removeItem("token"); history.push("/"); }; return ( {/* ... */} ); }; export default withRouter(Navbar);

Και voilà ! Αυτό είναι. Κατακτήσατε επίσης τη γη των επικυρωμένων διαδρομών.

Ρίξτε μια ματιά στη ζωντανή επίδειξη εδώ και τον πλήρη κώδικα σε αυτό το repo για αναφορά σας.

συμπέρασμα

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

Σε αυτόν τον οδηγό, θα μάθει για τα ζωτικά συστατικά σε React Router όπως Route, withRouter, Link, και ούτω καθεξής, μαζί με ορισμένες προηγμένες έννοιες όπως η γνησιότητα διαδρομές, που απαιτούνται για τη δημιουργία μιας εφαρμογής.

Ρίξτε μια ματιά στα έγγραφα του React Router για να λάβετε μια πιο λεπτομερή επισκόπηση κάθε στοιχείου.