A stoppos útmutató a router v4 reakciójához: Grok React Router 20 perc alatt

Szia React Autós! Szeretne egy kört a React Routerrel? Ugorj be. Menjünk!

A React Router filozófiájának megértéséhez tudnunk kell, hogy mi az egyoldalas alkalmazás (SPA).

Mi az egyoldalas alkalmazás?

Alapvetően ez egy webalkalmazás vagy webhely, amely interakcióba lép a felhasználóval azáltal, hogy dinamikusan átírja az aktuális oldalt, nem pedig teljes új oldalakat tölt be egy szerverről.

Miért ilyen jó ?!

1. elkerüli a felhasználói élmény megszakítását az egymást követő oldalak között

2. az alkalmazás inkább asztali alkalmazásként viselkedik

3. az összes kód erőforrást dinamikusan betöltjük és szükség szerint hozzáadjuk az oldalhoz, általában a felhasználói műveletekre reagálva

4. mert ez a kewl és a kewl és az extra-ultra-széles-4K-szintű kewl. ?

A SPA-k jelenleg ipari szabványnak számítanak, és sok vállalat arra törekszik, hogy programozókat találjon projektjeik kidolgozásához.

Mi a React Router?

A React Router egy olyan eszköz, amely lehetővé teszi az útvonalak kezelését.

Mivel SPA-val van dolgod, szükséged van egy módra a képernyőre töltött tartalom elindításához. A React Router bemutatja a „Dinamikus útválasztás” elnevezésű koncepciót, amely teljesen eltér a megszokott „Statikus útválasztástól”.

Amikor „Statikus útválasztással” foglalkozik, deklarálja útvonalait az alkalmazás inicializálásának részeként, mielőtt bármilyen megjelenítés megtörténne (Rails, Express, Ember, Angular és így tovább).

A „dinamikus útválasztás” azt jelenti, hogy az útválasztás az alkalmazás megjelenítésekor történik, nem pedig egy futó alkalmazáson kívüli konfigurációban vagy egyezményben.

A React Router v4 támogatja és végrehajtja az útválasztás összetevő alapú megközelítését.

Különböző útválasztási összetevőket biztosít az alkalmazás és a platform igényeinek megfelelően.

Ebben a konkrét esetben felfedezzük   mert a „dinamikus útválasztást” egy „webalkalmazás” kontextusban szeretnénk használni, a másikat pedig más körülményekre hagyjuk.

Ki hozta létre a React Routert?

Ez a két csodálatos emberi lény, Michael Jackson és Ryan Florence. És megérdemlik a rengeteg tapsot! Együtt kezdték a React Training-et.

Manapság javíts ki, ha tévedek, külön utakat követtek:

Michael Jackson folytatja a React Training fejlesztését.

Ryan Florence létrehozta a Reach.Tech-et.

Van valami köze a routernek a Reduxhoz?

Nem. Bár jellemzően együtt jelennek meg.

biztos vagy ebben? Igen ? Biztos vagyok benne ?

Mindkettő nagyszerű és nélkülözhetetlen eszköz, és mivel magasabb rendű összetevők (alapvetően olyan JavaScript-funkciók, amelyek egy összetevőt vesznek fel, és újat adnak vissza), ezért gyakori, hogy együtt találják őket.

Beállítás, piszkoljuk meg a kezünket

A folyamat végigvezetéséhez a Create React App (CRA) alkalmazást fogjuk használni.

Végül tiszta kazánja lesz egyszerű weboldalak készítéséhez.

Ha véletlenül a React vagy a React App létrehozása meghaladja a kezét, azt javaslom, hogy először vegyen részt ezekben, majd térjen vissza egy csésze kávéval.

Oké, azoknak, akik velem álltak: a CRA telepítése után telepítenie kell a reakció-útválasztó csomagot.

Ha az npm-et használja, nyissa meg a terminált, lépjen a CRA mappába, és írja be:

npm i -S react-router-dom

vagy

yarn add react-router-dom-ha fonalat használ csomagkezelőként.

Csak hogy ellenőrizze a csomagját.jsonés győződjön meg róla, hogy minden rendben van, itt az enyém:

Amint láthatja? Ezen a ponton a reakció-router-dom függőségünk.

Kész, npm vagy a fonal kezdete és…

Bumm! Ma lovagolunk!

Az épülő alkalmazás

Készítsünk egy egyszerű személyes weboldalt egy navigációs sávval, amely lehetővé teszi a felhasználó számára, hogy váltson a tartalom között. Weboldalunknak három fő szakasza lesz: Home , About és Topics .

A NavBar mindenütt jelen lévő komponens lesz, míg a Kezdőlap , a Névjegy és a Témakörök alább lesznek megjelenítve a kiválasztott útvonalak szerint.

Látja a böngésző URL-jét: localhost: 3000 / home az alábbi képernyőképen?

Ez azt jelenti, hogy a Home útvonal aktiválódik, és a Home nézet megjelenik.

Ez lesz a végeredményünk:

És ez…?, Ez egy weboldal?

? Igen, ez az!

Meztelen! Csak próbáljon nem érezni elfogultságot más bonyodalmak, például a stílus és így tovább! Nem akarom, hogy bármi mással is elvonja a figyelmét, mint hogy a React Router v4 implementálását milyen egyszerű végrehajtani .

Tehát, miután felépült a sokkból,?, Tegyük meg a következő lépést, és nézzük meg az /src/index.js fájlt.

/src/index.js

Az index.js az első fájl, amelyet a CRA betöltött, ami az alkalmazásodban található adatok inicializálási pontja.

Nézzük meg, mit tettem:

Szóval mit csinálunk itt?

  • Importáljuk a komponens a telepített függőségből, és kijelenti, hogy hívni fogjuk ettől a ponttól kezdve:

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

  • Importálunk egy az általam létrehozott komponens a weboldalunkon használni kívánt útvonalakkal - ne aggódjon most ezzel a komponenssel:

import { Routes } from ‘./routes’;

A komponens az alapértelmezett hitelminősítő helyét veszi át  összetevő. Alapvetően ugyanaz - csak hívtam mert úgy érzem, hogy van értelme a kódot értelmesebbé és olvashatóbbá tenni.

Te nem töltődnek egyedülálló App már, de a Routes összetevő, amely kezeli az útvonalakat, és indítja a szerelési és renderelő a komponensek amely betölti az egyes útvonal.

  • Ölelünk a ... val összetevő.

Ami azt illeti, magasabb rendű alkatrészként működik, amely csak a jövőben ismeri gyermekeit, és szélesebb körben interakcióba lép velük, függetlenül attól, hogy kik és hányan vannak.

Nem kell aggódnia a működése miatt. Ez egy sokkal mélyebb és fejlettebb kérdés.

Csak győződjön meg róla, hogy megértihogy a React.DOM már nem tölt be egy egyszerű alkalmazást . Betölti az alkalmazást, amelyet egy olyan komponens ölel fel, amelyet úgy hívnak, Routerhogy egy magasabb példányban vagy hatókörben kölcsönhatásba léphet vele és a böngészővel DOM.

Com ponent

Tehát alapvetően mit csinál a route.js ?

A React és néhány alkatrész importálásával kezdődik, amelyet később megnézünk. Gondoljon csak rájuk, mint egyszerű hontalan alkotóelemekre: Home , About , TopicList , TopicDetail , NavBar és NoMatch .

Három komponenst importál a reak-router-dom csomagból is, amelyekre szükségünk lesz:, és .

Az importálás után exportáljuk a hontalan komponens Routes elemet, amely meghívja a NavBar(amely mindig a képernyőn lesz) és a összetevő.

Mit csinál ez a srác?

Ez az összetevő alapvetően az első gyermeket rendereli vagy amely megfelel a böngésző helyének.

Az alábbiakat kezdi tesztelni: „a böngésző URL-je ebben pálya? Nem? Oké." Következő útvonal. „A böngésző URL-je ezen a másik útvonalon található? Nem."

Következő útvonal. "Ó, értem! Ebben van, indítsuk el a Component renderelést, és most fejezzük be az ellenőrzést (nem érdekel az alábbi útvonalak…)

Ha véletlenül ez történik:

a második útvonal soha nem indul el, mert a Switch leugrik, mielőtt elérné. Csak megy kávézni… (és én is !!!? Vissza!)

Belül mindegyiket meghatározzuk .

Minden egyes ezt mondja a böngészőnek:

Hé, böngésző DOM! Ha engem választ, mert az Ön tartózkodási helye (pontosan) ez, kérjük, adja meg a következő alkatrészt ”

Vagy más esetekben, például az alábbiakban:

- Hé, böngésző, ha bármilyen esetre is azért választott engem, mert a hely / Témák / „valami” render az Alkatrész Téma részletei. Természetesen megtudja, ki ez: topicId (változó) dolog, amelyet a felhasználó arra kér, hogy illesszük össze és ennek megfelelően irányítsuk ”.

Oké mindenkinek. Mivel az alapértelmezett viselkedés az egyes útvonalak ellenőrzése, akkor tartalékot kell adnunk arra az esetre, ha ez nem felel meg semminek:

Ez az utolsó útvonal egyszerűen megjelenít egy alapértelmezett oldalt, amely azt állítja, hogy egyetlen útvonal sem egyezik, egyfajta HTTP 404 hiba.

Ne feledje, hogy itt egy SPA-val és a „dinamikus útválasztással” van dolgunk, tehát ez egy olyan szimuláció, mintha egy szerverhez vezető útvonalakat követelnénk? Valójában nem vagyunk!

Csak azt nem tudjuk, hogy mit kell megjeleníteni, ha a felhasználó például valami nem összeillő szöveget szúr be az URL-be, például: // localhost: 3000 / HelloWorld .

Mivel ez az útvonal nem volt meghatározva, egy NoMatch komponenst biztosítunk, hogy tájékoztassuk őket az útvonal nem létezéséről.

azért van, mert ha a felhasználó minden útvonal nélkül megpróbálja betölteni az URL-t // localhost: 3000 / , akkor NoMatch-et kap, mert nincs megadva útvonal. Tehát ennek kezelésére a legjobb mód a használat  és tolja a felhasználót a / Home útvonalra, amely alapértelmezés szerint az alkalmazás első képernyője.

Miért van erre szükség?

Ismét azért, mert általában a felhasználó az Általános URL beírásával és az URL nélkül indította el az alkalmazást az első renderelt komponens az lenne . Nem ezt akarjuk, hanem azt, hogy a felhasználót átirányítsuk a összetevő.

Nézetek és / vagy alkatrészek

Útmutatónk ezen a pontján szeretnék megállni egy kicsit, hogy megkülönböztessem a nézetet az alkotóelemtől. Ez nem ennek az útmutatónak a lényege, de lesz értelme, miután megmutatom Önnek a CRA-m mappa felépítését .

Amikor „gondolkodunk a reakcióban” és elkezdünk egy alkalmazást készíteni, és az növekedni kezd, néha leállunk, mert úgy érezzük, hogy a dolgok nincsenek jó helyen.

Ez azt jelenti, hogy neveket kell adnunk ezeknek a dolgoknak, és külön „fiókokban” vagy „mappákban” kell elkülöníteni őket.

A nézetek és az alkatrészek olyan dolgok, amelyeket a képernyőn festenek. Tehát mi különbözteti meg egyik dolgot a másiktól?

És a nézetek nem alkotóelemek? És az alkatrészek nem nézetek?

Nos, a kódolási nyelv szempontjából a nézet és az összetevő minden bizonnyal függvények vagy osztályok - hontalan vagy állapotos összetevők, ahogyan a React lingóban nevezzük.

Tehát mi különbözteti meg őket?

Nos, a Nézetnek van útvonala. Ebben a nézetben sok alkatrész renderelhető.

Az összetevő általában egy absztrakció, amelyre sokszor lehet hivatkozni különböző nézetekben. Ez lehet gomb, űrlap, diagram. Ez akár összetettebb dolog is lehet, miközben a nézet egyedi és útvonala van.

Ez egy nagyon egyszerű fogalom, amelyet az elején meg kell érteni, amint elkezdünk egy olyan kicsi alkalmazást csinálni, mint egy személyes kezdőlap.

Vessünk egy pillantást a CRA mappaszerkezetemre:

Tehát, amint láthatja, én - és a világ 99% -a - szeretem a narancsot és a körtét különböző kosarakban tartani. És te is! Hiszek benned! Bízom benned!

Rengeteg minta van a dolgok szervezéséről, és sok vita akkor kezdődik, amikor több olyan csomagot vezetünk be, mint a Redux, amelyek kicsit átalakítják az alkalmazás architektúráját, vagy amikor a képernyőn szeretnénk festeni Irányítópultok, Widgetek, Kerékpározás Disznók vagy furcsább dolgok…

De a fogalmak megkülönböztetéséhez alaposan vegye figyelembe a Nézetek és alkatrészek elemeket.

A Főoldal , a Névjegy , a TopicList és a NoMatch nézetek. Megvannak a maguk megfelelő útvonalai.

A NavBar egy mindenütt jelen lévő összetevő, amelyre mindig hivatkoznak. Nincs útvonala.

A TopicDetails egy olyan összetevő, amely a TopicList /: topicId útvonal aktiválásakor megjeleníti a Téma információkat . Ez egy újrafelhasználható alkatrész, amelyet más helyekre lehet importálni, és átalakítani vagy kibővíteni. Nincs konkrét útvonala.

A Főoldal / A nézetekről

A Home mappában van egy index.js és egy Home.js fájl.

Jó gyakorlat az index.js birtoklása a többi fájl exportálásához. Csak bízz bennem, vagy hozz egy kis bort, mert ez hosszú beszélgetés lesz?

... ó, igyunk csak a bort, és később beszélünk! ?

Ez egy egyszerű nézet, amely csak a címét exportálja. Az About nézet megegyezik ezzel.

Most vessünk egy pillantást a TopicList nézetre, mert ez egy kicsit más.

TopicList és TopicDetail nézetek

Tehát a TopicList View a különböző útvonalak kezelésének ezen részletével rendelkezik. Ne feledje, hogy / Topic /: topicId ezt irányítja mondta hogy a TopicDetail kezelje?

Itt vagyunk ezzel.

A TopicList a (z) {match} -t kapja meg támogatásként . Ne hagyja, hogy a romboló funkció megijesszen. Egyszerűen fogadhatnánk kellékeket és felhívhatnánk kellékeket . Meccs . A hűvös gyerekek egyszerűen így rombolják le a kellékeket az olvashatóság és a React flow javítása érdekében. Én is nagyon szeretem! Ez olyan, mint amikor egy dobozt vesz fel a mobiljával, vagy közvetlenül veszi fel a mobilját. Ami azt illeti, a dobozban tartották, de ebben a pillanatban csak az e-mailt kell ellenőriznie? tehát a doboz maradjon ott, ahol van! Ne vidd magaddal dolgozni!

Mindenesetre továbbra is a kódra összpontosítsunk.

Ebben a fájlban a React Routerből importálunk egy összetevőt, amelynek neve: {Link}, mert linkeket akarunk létrehozni?

A választott Útvonalról kapunk egyezést , amikor rákattintunk a Témák gombra, és rendezetlen listát jelenítünk meg 3 lehetőséggel: 1. téma , 2. téma és 3. téma .

Alapvetően, ha a felhasználó a Topic1 Link lehetőséget választja a képernyőn, aa böngésző URL-jét arra az útvonalra / Témák / Téma1 irányába tereli .

Mi történik ezután? és észlelje, hogy az URL megváltozott, és nézze meg az információikat, hogy ellenőrizze, milyen útvonalat kell elindítani. Tehát felfedezik, hogy most a kiváltott útvonal a / Topics /: topicId és a TopicDetail renderelést váltja ki . A TopicDetail megjeleníti az 1. téma részleteit.

TopicDetail kap mérkőzés a router és megjeleníti a topicId található match.params.topicId .

A NavBar komponens

A NavBar komponensnek különleges szerepe van itt, mert mindenütt jelen van.

Feladata, hogy lehetővé tegye a felhasználó számára, hogy navigáljon a webhelyen, és megmutassa a rendelkezésre álló szakaszokat (útvonalakat).

Ahogy az elején látta, bent van de kívül így minden nézet mindig a NavBar - tal lesz a tetején.

Amint láthatja, szerepe alapvető. Csak ellát és elmondja kérdezni hogy kiváltsa a kiválasztottat és megjeleníti a képernyőn.

Végül, de nem utolsó sorban

Úgy gondolom, hogy ekkor már valószínűleg megértette a React Router működését, és fel lehet használni egy egyszerű weboldal elkészítésére.

Ha szeretné ellenőrizni a kódot vagy tesztelni, akkor húzza meg a repót, elérhető a GitHubon.

Bibliográfia

A cikk elkészítéséhez a React Router dokumentációját használtam, amelyet itt talál.

Az összes többi általam használt webhely a dokumentum mentén van összekapcsolva, hogy információkat adjon vagy kontextust adjon ahhoz, amit megpróbáltam elmagyarázni.

Ez a cikk a “Hitchhiker's Guide to React Router v4” című sorozat 1. része. A 2–4. Rész az egész héten a freeCodeCamp-ra érkezik!

  • II. Rész: [mérkőzés, helyszín, előzmények] - a legjobb barátaid!
  • III. Rész: rekurzív utak, a végtelenségig és azon túl is!
  • IV. Rész: útvonal-konfiguráció, az útvonal-konfigurációs tömb meghatározásának rejtett értéke

Nagyon szépen köszönjük!