Hitchhikerin opas React Router v4: [ottelu, sijainti, historia] - parhaat ystäväsi!

Hei! Tervetuloa Hitchhiker's Guide to React Router v4: n osaan II!

Nyt kun olemme asettaneet pallon liikkumaan ensimmäisellä pienellä sovelluksellamme, keskitymme kolmeen matkakumppaniin: ottelu , sijainti ja historia .

Mitä tapahtuu, jos pääset kotikomponenttikoodiin ja laitat console.log- sivun tarkistaaksesi rekvisiitta?

Reititin tuo komponenttiin seuraavat objektit:

Vau! Mistä se tuli? ?

Jokaisella reitittimen käärimällä näkymällä, komponentilla tai muulla on nämä objektit. tekee työnsä korkeamman asteen komponenttina ja kääri komponentit tai näkymät ja pistää nämä kolme esinettä rekvisiittaan niiden sisällä.

Joten ... miksi he ovat siellä ja mitä voin käyttää niistä? ?

He ovat parhaita ystäviäsi! Luota minuun! ?

Ottelu

Ottelu esine sisältää tietoja siitä, miten vastasi URL-osoitetta.

  • params : (objekti), avain / arvo-parit jäsennelty URL-osoitteesta, jotka vastaavat polun dynaamisia segmenttejä
  • isExact : (boolean), tosi, jos koko URL-osoite täsmää (ei loppumerkkejä )
  • polku : (merkkijono), polkumalli, jota käytetään vastaamaan. Hyödyllinen sisäkkäisten reittien rakentamiseen . Tarkastelemme tätä myöhemmin yhdessä seuraavista artikkeleista.
  • url : (merkkijono), URL-osoitteen vastaava osa. Hyödyllinen sisäkkäisten linkkien luomiseen.

Joten Koti komponentti meillä on tämä ottelu kohde:

isExact on tosi, koska koko URL-osoite on täsmäytetty, parametrit- objekti on tyhjä, koska emme välittäneet siihen mitään, polku ja URL- avaimen arvot ovat yhtä suuret, mikä vahvistaa, että isExact on totta.

Katsotaanpa nyt TopicList-näkymää :

Ei mitään uutta tähän asti, sama juttu kuin Home View , osoittaa polun ja url ja TopicList .

Mutta entä jos katsomme TopicDetails ?

Okei, mitä meillä täällä on?

isExact on edelleen totta, koska koko URL-osoite täsmää . params- objekti tuo komponenttiin välitetyn topicId- tiedot.

Kiinnitä huomiota siihen, miten topicId on muuttuja.

Mutta missä se olettaa Topic1- arvon?

Yksinkertainen, vedot sitä nimenomaisella tavalla TopicList-linkeissä .

Tarkista, kuinka TopicList on käyttänyt hakua , jotta voimme tietää sen URL-osoitteen.

Tämä linkki voi olla dynaaminen . Myöhemmin teemme esimerkki jossa Linkki on suhteellinen polku, jossa et tiedä aiemmin, jos se on Topic1 tai Topic3520 .

Mutta…

Missä tilanteessa isExact on väärä?

No ... anna minun antaa sinulle esimerkki:

Tässä tilanteessa olemme lisänneet / HelloWorldSection selaimen URL-osoitteeseen.

Reititin ei tiedä koko polkua HelloWorldSectioniin, joten se reitittää sinut siihen suuntaan, missä se tietää tien.

isExact osoittaa väärän ilmoituksen siitä, että " koko URL-osoitetta ei löytynyt ".

Tämä on erittäin hyödyllistä, koska huomaat heti, kun aloitat kylpylöiden tekemisen RRv4: n kanssa!

Vain loppuun lähestymistapaamme vastaamaan Tsekkaa:

Olemme käyttäneet match.params.topicId -tulostusta aiheen nimen näyttämiseen näytöllä.

Tämä on yksi yleisimmistä ottelun käyttötavoista .

Tietenkin sillä on lukuisia sovelluksia. Oletetaan, että meidän on haettava API tämän topicId- tietojen kanssa. ?

Sijainti

Sijainti objekti edustaa sovellus on nyt, minne haluat sen menevän, tai vaikka se oli.

Se löytyy myös historiasta. Sijainti, mutta sinun ei pitäisi käyttää sitä, koska se on muutettavissa.

Sijainti esine koskaan mutatoitu voit käyttää sitä elinkaaren koukut määrittämään milloin navigointi tapahtuu. Tämä on todella hyödyllistä tietojen hakemisessa tai DOM- sivuvaikutuksissa.

Katsotaan console.log (paikka) sisällä kotinäkymän :

Älkäämme sukeltako syvälle paljon ja pysyessä sen yksinkertaisen toiminnallisuuden kanssa.

Sinulla on polun avain / arvo.

Voit käyttää sitä esimerkiksi tarkistamaan, onko polun nimi muuttunut:

Sinä pystyt tai siihen. Voit tehdä history.push tai history.replace kuten näemme myöhemmin.

Voit luoda mukautetun objektin ja käyttää sitä

  • history.push (sijaintiX)

Voit myös siirtää sen ja komponentit.

Tämä estää heitä käyttämästä todellista sijaintia reitittimen tilassa. Ehkä haluat huijata komponentin hahmonnettavaksi eri paikassa kuin todellinen?

Tarpeeksi sijainti nyt ...

Siirrytään historiaan !

Historia

Historia objekti avulla voit hallita ja käsitellä selaimen historia sisällä näkemyksiä tai komponentteja.

  • pituus : (numero), merkintöjen määrä historian pinossa
  • toiminto : (merkkijono), nykyinen toiminto (PUSH, REPLACE tai POP)
  • sijainti : (esine), nykyinen sijainti
  • työnnä (polku, [tila]) : (toiminto), työntää uuden merkinnän historian pinoon
  • korvaa (polku, [tila]) : (toiminto), korvaa nykyisen merkinnän historian pinossa
  • go (n) : (funktio), siirtää osoitinta historian pinossa n merkinnällä
  • goBack () : (funktio), vastaa go (-1)
  • goForward () : (funktio,) vastaa go (1)
  • esto (kehote) : (toiminto), estää navigoinnin

Joten console.log historian esineen meidän kotinäkymää ja katso mitä se näyttää:

Okei, juuri sitä mitä odotimme.

Se kertoo, että olemme saapuneet tänne kanssa PUSH toimintaa, että pituus esineen on 40 (kuten navigoida läpi sovelluksen historia kasvaa 50 ja pysähtyy siellä, poistetaan vanhat merkinnät ja pitää sen koon joka kerta sovelluksen työntää toinen historiamerkintä objektiin).

Se antaa meille sijaintitiedot .

Jälleen historiaobjekti on muutettavissa . Siksi on suositeltavaa käyttää sijainnin alkaen tehdä rekvisiitta Route , eikä history.location .

Tämä varmistaa, että oletukset Reactista oikeat elinkaarikoukkuissa.

Esimerkiksi:

Tyypillisesti voit käyttää sitä muuttamaan selaimen URL-polkua.

Seuraavassa esimerkissä vältämme ja luo painike, joka painaa historiaa:

Tietenkin voit käyttää sitä URL-osoitteen muutoksen käynnistämiseen joidenkin tietojen hakemisen tai sivuvaikutusten jälkeen.

On mukavaa käyttää sitä keskellä JSX: tä, jossa et halua käyttää komponentteja. Voit palauttaa historia push ja laukaista reititin on päivittää selaimen URL-osoitteen.

Viimeinen mutta ei vähäisin

Luulen, että tähän mennessä sinulla on jo hyvä idea ottelun , sijainnin ja historian käytöstä .

En tehnyt mitään muutoksia alkuperäiseen kattilalaatikkoon, joten voit vapaasti leikkiä sen kanssa samassa repossa, joka toimitetaan tämän oppaan osassa 1.

05. Bibliografia

Tämän artikkelin tekemiseksi olen käyttänyt React Router -dokumentaatiota, jonka löydät täältä.

Kaikki muut käyttämäni sivustot on linkitetty asiakirjaan lisäämällä tietoja tai tarjoamaan asiayhteyttä siihen, mitä olen yrittänyt selittää sinulle.

Tämä artikkeli on osa "Hitchhiker's Guide to React Router v4" -sarjaa

  • Osa I: Grok React Router 20 minuutissa
  • Osa III: rekursiiviset polut, äärettömyyteen ja sen ulkopuolelle!
  • Osa IV: reitin määritys, reitin määritysryhmän määrityksen piilotettu arvo

? Kiitos paljon!