A stoppos útmutató a React Router v4-hez: [mérkőzés, helyszín, előzmények] - a legjobb barátok!

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!