Reageeri ruuteri õpetus - kuidas koodinäidetega renderdada, ümber suunata, vahetada, linkida ja muud

Kui olete just Reactiga alustanud, keerate tõenäoliselt ikkagi pea kogu ühe lehe rakenduse kontseptsiooni ümber.

Traditsiooniliselt töötab marsruutimine nii: oletame, /contactet sisestate URL-i. Brauser esitab serverile GET-päringu ja server tagastab vastuseks HTML-lehe.

Kuid uue ühe lehe rakenduse paradigma korral serveeritakse kõik URL-i päringud kliendipoolse koodi abil.

Rakendades seda Reacti kontekstis, on iga leht React komponent. Reageerimisseade vastab URL-ile ja laadib selle lehe komponendi üles.

Kõik toimub nii kiiresti ja sujuvalt, et kasutaja saab brauseris omakeelse rakenduse sarnase kogemuse. Marsruudi üleminekute vahel ei ole toretsevat tühja lehte.

Selles artiklis saate teada, kuidas kasutada React-Routerit ja selle komponente ühe lehe rakenduse loomiseks. Nii et avage oma lemmiktekstiredaktor ja alustame.

Seadistage projekt

Looge uus React-projekt, käivitades järgmise käsu.

yarn create react-app react-router-demo

Kasutan sõltuvuste installimiseks lõnga, kuid võite kasutada ka npm.

Järgmisena installime react-router-dom.

yarn add react-router-dom

Komponentide kujundamiseks kasutan Bulma CSS raamistikku. Nii et lisame ka selle.

yarn add bulma

Järgmine, import bulma.min.csson index.jsfail ja koristada kõik trafaretset koodi App.jsfaili.

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

Nüüd, kui olete projekti seadistanud, alustame mõne lehe komponendi loomisest.

Lehekülje komponentide loomine

Looge src kausta sees lehtede kataloog, kuhu parkime kõik lehe komponendid.

Selle demo jaoks looge kolm lehte - Avaleht, Teave ja Profiil.

Kleepige komponendid Kodu ja Teave järgmised andmed.

// 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;

Profiililehe loome hiljem artiklist.

Looge naviriba komponent

Alustame oma rakenduse jaoks navigeerimisriba loomisega. See komponent kasutab komponenti alates react-router-dom.

Looge src kausta sees kataloog nimega "komponendid".

// 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;

isOpenRiigi muutuja kasutatakse käivitamiseks menüüst mobiiltelefoni või tablett seadmeid.

Nii et lisame hamburgeri menüü.

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

Lingi lisamiseks menüüsse kasutage komponenti react-router-dom.

NavLinkKomponent deklaratiivne viis liikumiseks taotluse. See sarnaneb Linkkomponendiga, välja arvatud see, et see võib lingile rakendada aktiivset stiili, kui see on aktiivne.

Marsruudi määramiseks kasutage torekvisiiti ja edastage tee nimi.

activeClassNameProp lisab klassi aktiivse lingile, kui see on praegu aktiivne.

 Home 

On brauseri NavLinkkomponent on teisendatud märgendi hrefatribuudi väärtus, mis oli möödunud aastal toettepaneku.

Samuti peate siin määrama exactrekvisiidi, et see sobiks täpselt URL-iga.

Lisage kõik lingid ja viimistlege Navbarkomponent.

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; 

Kui märkate siin, olen lisanud sisselogimisnupu. Tuleme Navbarkomponendi juurde tagasi, kui arutame hiljem juhendis kaitstud marsruute.

Lehtede renderdamine

Nüüd, kui Navbarkomponent on seadistatud, lisame selle lehele ja alustame lehtede renderdamisega.

Kuna navigeerimisriba on kõigi lehtede ühine komponent, on selle asemel, et helistada igas lehe komponendis olevale komponendile, parem viis renderdada see Navbarühises paigutuses.

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

Nüüd lisage konteineri sisse lehe komponendid.

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

Kui kontrollite tulemusi kohe, märkate, et lehele renderdatakse nii avalehe kui ka lehe Teave komponent. Seda seetõttu, et me pole veel marsruutimisloogikat lisanud.

BrowserRouterKomponentide marsruutimise lisamiseks peate komponendi React Routerist importima . Kõik, mida peate tegema, on mähkida kõik lehe komponendid komponendi sisse BrowserRouter. See võimaldab kõigil lehe komponentidel marsruutimise loogikat. Täiuslik!

Kuid jällegi ei muutu tulemustega midagi - näete siiski mõlemat sulatatud lehte. Lehekomponenti peate renderdama ainult siis, kui URL sobib kindla teega. Seal Routetuleb mängu React Routeri komponent.

RouterKomponent on pathprop et aktsepteerib lehe tee, ja leht komponent tuleks pakendada nii, et Router, nagu allpool näidatud.

Nii et teeme sama Homekomponendi puhul.

Eespool exacttoodud rekvisiit ütleb Routerkomponendile, et see sobiks täpselt teega. Kui te ei lisa exactrekvisiiti /rajale, sobib see kõigi marsruutidega, mis algavad /kaasamisega /about.

Kui lähete kohe tulemusi vaatama, näete endiselt renderdatud komponente. Kuid kui külastate /about, märkate, et Aboutrenderdatakse ainult komponent. Sellist käitumist näete, kuna ruuter jätkab URL-i ja marsruutide sobitamist ka siis, kui see on juba marsruudi sobitanud.

Peame käskima ruuteril lõpetada sobitamine pärast marsruudi sobitamist. Selleks kasutatakse SwitchReact Routeri komponenti.

function App() { return ( ); }

Palun! Olete oma rakenduses Reageerimine marsruutimise edukalt konfigureerinud.

Kaitstud marsruudid ja ümbersuunamine

Reaalsetes rakendustes töötades on teil autentimissüsteemi taga mõned marsruudid. Teil on marsruute või lehti, millele pääsevad juurde ainult sisse loginud kasutajad. Selles jaotises saate teada, kuidas selliseid marsruute rakendada.

Pange tähele, et ma ei hakka looma ühtegi sisselogimisvormi ega luba kasutajatel autentida mõnda tagateenuse teenust. Päris rakenduses ei saaks te autentimist rakendada siin näidatud viisil.

Loome profiililehe komponendi, millele peaks juurde pääsema ainult autentitud kasutaja.

// 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. ); };

Haarame marsruudi parameetrite abil URL-ist kasutaja nime.

Lisage marsruut Profiil.

Praegu pääseb profiililehele otse juurde. Seega, et see oleks autentitud marsruut, looge autentimisloogika mähkimiseks kõrgema järgu komponent (HOC).

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);

Ja voilà ! See selleks. Olete vallutanud ka kinnitatud marsruutide maa.

Tutvuge otseülekandega siin ja täieliku koodiga selles repos.

Järeldus

Loodan, et nüüdseks on teil hea ettekujutus sellest, kuidas kliendipoolne marsruutimine üldiselt töötab ja kuidas realiseerida Reactis marsruutimine, kasutades React Routeri teeki.

Käesolevas juhendis juttu elulised in Lasta Router nagu Route, withRouter, Link, ja nii edasi, koos mõned täiustatud mõisted nagu autenditud marsruutide et on vaja luua rakenduse.

Iga komponendi kohta üksikasjalikuma ülevaate saamiseks vaadake React Routeri dokumente.