Hé! Üdvözöljük a Hitchhiker Guide for React Router v4 II. Részében!
Most, hogy az első kis alkalmazásunkkal beállítottuk a labdát, összpontosítsunk három utazótársára: mérkőzésre , helyszínre és előzményekre .
Mi történik, ha bekerül a Home Component kódba, és egy console.logot tesz oda, hogy ellenőrizze a kellékeket?
Az útválasztó a következő objektumokat vezeti be a komponensbe:
Azta! Honnan származik ez? ?
Nos, minden nézet, alkatrész vagy bármi, amit a Router csomagol, tartalmazzák ezeket az objektumokat. magasabb rendű alkatrészként végzi a feladatát, és beburkolja az összetevőket vagy nézeteket, és ezt a három tárgyat kellékként injektálja beléjük.
Tehát ... miért vannak ott, és mit használhatok ki belőlük? ?
Ők lesznek a legjobb barátaid! Bízz bennem! ?
mérkőzés
A mérkőzés objektum információkat tartalmaz arról, hogy a megfelelt az URL-nek.
- params : (objektum), az URL-ből elemzett kulcs / érték párok az útvonal dinamikus szegmenseinek megfelelően
- isExact : (logikai érték), igaz, ha a teljes URL egyezik (nincs záró karakter)
- elérési út : (karakterlánc), az egyezéshez használt útvonal minta Hasznos beágyazott útvonalak építéséhez . Ezt később megnézzük a következő cikkek egyikében.
- url : (string), az URL egyeztetett része. Hasznos beágyazott linkek készítéséhez.
Tehát a Home komponensben van ez a match objektum:
Az isExact igaz, mert a teljes URL megegyezett, a params objektum üres, mert nem adtunk át semmit, az elérési út és az URL kulcsértékei megegyeznek, megerősítve, hogy az isExact igaz.
Most vessünk egy pillantást a TopicList nézetre :
Semmi új a mai napig, ugyanazt a történetet, mint a Sajátnézetet , amely bemutatja a pálya és a url a TopicList .
De mi van, ha megnézzük a TopicDetails-et ?
Oké, mi van itt?
Az isExact továbbra is igaz, mert a teljes URL megfelelt. A params objektum hozza a topicId információt, amelyet átadtak az összetevőnek.
Ügyeljen arra, hogy a topicId hogyan változó.
De hol veszi fel a Topic1 értéket?
Egyszerű, a TopicList Linkekben kifejezetten hivatkozik rá .
Ellenőrizze, hogyan használtuk az egyezést a TopicList-hez, hogy megismerjük annak URL-jét.
Ez a link dinamikus lehet . Később fogunk tenni egy példát, ahol linkeket a relatív útvonal, ahol nem tudom, korábban, ha ez Topic1 vagy Topic3520 .
De…
Melyik helyzetben van az isExact hamis?
Nos ... hadd mondjak egy példát:
Ebben a helyzetben bevezettük a / HelloWorldSection részt a böngésző URL- jébe .
Az történik, hogy az útválasztó nem ismeri a HelloWorldSection teljes elérési útját, így addig vezet, amíg oda nem ismeri az utat.
Az isExact hamisat mutat, pontosan megmondva, hogy a „ teljes URL nem egyezik ”.
Ez nagyon hasznos, mivel látni fogja, amint elkezdi az RRv4-gyel SPA-t csinálni!
Csak azért, hogy befejezze a megközelítés felel meg , ezt nézd meg:
A match.params.topicId programot arra használtuk, hogy a képernyőn kinyomtassuk a témánk nevét.
Ez az egyik leggyakoribb szokásokkal a mérkőzés .
Természetesen számos alkalmazással rendelkezik. Tegyük fel, hogy be kell szereznünk egy API-t a topicId információkkal. ?
Elhelyezkedés
A hely az objektum képviseli, ahol az alkalmazás most, ahol szeretné, hogy menjen, vagy akkor is, ha ez volt.
Megtalálható a history.location oldalon is, de ezt nem szabad használni, mert változtatható.
A létesítmény célja soha nem mutált, így tudja használni azt az életciklus horgok, amelyek alapján a navigációs történik. Ez valóban hasznos adat beolvasás vagy DOM mellékhatások esetén.
Nézzük a console.log (hely) elemet a Kezdőlap nézetben :
Ne mélyüljünk el sokat, és tartsuk be az egyszerű funkcionalitást.
Megvan az elérési út kulcs / érték.
Használhatja például annak ellenőrzésére, hogy az útvonalnév megváltozott-e:
tudsz vagy hozzá. Megteheti a history.push vagy a history.replace lehetőséget, ahogy később látni fogjuk.
Létrehozhat egy egyedi objektumot és felhasználhatja azt
- history.push (helyX)
Át is adhatja és alkatrészek.
Ez megakadályozza, hogy a router állapotában a tényleges helyet használják. Lehet, hogy át akarja csalni egy alkatrészt, hogy a valóságtól eltérő helyen jelenjen meg?
Most elég a hely ...
Térjünk át a történelemre !
Történelem
Az előzmények objektum lehetővé teszi a böngésző előzményeinek kezelését és kezelését a nézeteken vagy az összetevőkön belül.
- hossz : (szám), az előzmények veremében szereplő bejegyzések száma
- művelet : (karakterlánc), az aktuális művelet (PUSH, REPLACE vagy POP)
- hely : (objektum), az aktuális hely
- push (elérési út, [állapot]) : (függvény), új bejegyzést tol be az előzmények veremébe
- csere (elérési út, [állapot]) : (függvény), az aktuális bejegyzés helyébe lép az előzmények veremében
- go (n) : (function), az előzmények veremében lévő mutatót n bejegyzéssel mozgatja
- goBack () : (függvény), egyenértékű a go (-1)
- goForward () : (függvény,) egyenértékű a go (1)
- blokk (prompt) : (funkció), megakadályozza a navigációt
Tehát nézzük meg a console.log történelemobjektumot a Kezdőlap nézetben, és nézzük meg, mit mutat:
Oké, pontosan arra számítottunk.
Azt mondja, hogy megérkeztünk ide a PUSH akció, hogy a hossza az objektum 40 (mint te navigálni keresztül az alkalmazás történelem növekszik 50 és megáll ott, elöntve a régebbi bejegyzéseket, és miközben a mérete minden egyes alkalommal az alkalmazás tolja egy másik történeti bejegyzés az objektumba).
Ez megadja nekünk a helyadatokat .
Ismét a történelem objektum változtatható . Ezért ajánlatos, hogy hozzáférjen a helyét a render kellékeket Route , nem pedig history.location .
Ez biztosítja, hogy a React-vel kapcsolatos feltételezései helyesek legyenek az életciklus horgainál.
Például:
Általában a böngésző URL elérési útjának megváltoztatására használható.
Az alábbi példában kerüljük és hozzon létre egy gombot, amely az előzmények nyomására szolgál:
Természetesen használhatja az URL-váltás kiváltására néhány adathívás vagy mellékhatás után.
Kényelmes a JSX közepén használni, ahol nem akar komponenseket meghívni. Akkor egyszerűen visszatérhet a történelem toló és kiváltó router , hogy frissítse a böngésző URL.
Végül, de nem utolsó sorban
Úgy gondolom, hogy ekkor már van egy jó ötlete a meccs , a hely és az előzmények használatára .
Nem változtattam a kezdeti kazánunkon, így nyugodtan játszhatsz vele ugyanabban a repóban, amely az útmutató 1. részében található.
05. Irodalomjegyzék
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 2. része.
- I. rész: Grok React Router 20 perc alatt
- 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!