Bine ați venit la Ghidul autostopistului pentru a reacționa la routerul v4, partea a IV-a!

Acum, că am aflat despre rutele recursive, să revenim la placa noastră inițială, pentru a evita problemele de amestecare și să învățăm cum să creăm o matrice de configurare a rutei.

Deci, doar pentru a recapitula puțin ce am făcut la început, să aruncăm o privire asupra inițialei noastre routes.js fişier:

Ghidul autostopistului pentru a reactiona la routerul v4 valoarea ascunsa
routes.js (fișier inițial)

Al nostru Trasee componenta returnează un div cu NavBar și a Intrerupator unde am definit toate rutele aplicației noastre.

Primul nostru pas în această Partea 4 va fi să definim o matrice de rute.

Rute Array

1611459667 299 Ghidul autostopistului pentru a reactiona la routerul v4 valoarea ascunsa
rute de configurare matrice

Am aruncat o privire asupra rutelor noastre și am creat această matrice care definește fiecare rută și subrută pe care le-am avut în aplicația noastră.

Grozav! Acum ce?!? ?

Refactorizați vechile rute codificate

Acum, să curățăm traseele noastre codificate și comutatorul!

1611459668 645 Ghidul autostopistului pentru a reactiona la routerul v4 valoarea ascunsa
componentă Routes îmbunătățită

Da! La revedere de la toate acele linii de cod. Ce facem cu adevărat?

Ei bine, mapăm peste matricea de hărți folosind un callback ES6 (săgeată grasă) pentru a returna o componentă abstractă numită . Transmitem în el o cheie (doar în scop de indexare React) și răspândim și informațiile despre rută.

Componenta

Între timp, trebuie să creăm acea componentă. Am decis să-l creez separat și să-l import în routes.js fişier.

1611459668 801 Ghidul autostopistului pentru a reactiona la routerul v4 valoarea ascunsa
Componenta MakeRouteWithSubRoutes

Bine, asta Componenta preia fiecare rută pe care o treceți în ea și returnează un router de reacție Componenta.

Ca recuzită, avem cale și metoda de redare, care va invoca route.component pe care doriți să o redați (apoi treceți în el recuzita răspândită și sub-rutele pe care trebuie să le cunoască).

Aceste rute provin din matricea de configurare a rutei – o ai? Grozav! ?

TopicList (Sub-rutare)

Acestea fiind spuse, să luăm o pradă la TopicList componentă, deoarece este cea care primește sub-rute din matricea de configurare a rutei:

1611459669 295 Ghidul autostopistului pentru a reactiona la routerul v4 valoarea ascunsa
Componentă TopicList cu subrutare

Deci, ce se întâmplă aici? Al nostru TopicList acum importă componentă și reutilizarea cu rutele pe care le-a primit.

De asemenea, face un rute.mapă peste subrute și repetă procesul realizat în routes.js fişier.

Ia-ți un minut să-l înțelegi și să te joci cu el!

Tot mai multe subrutare

După cum puteți vedea, acest lucru funcționează destul de bine. Este abstractizat, există separarea îngrijorărilor. este o componentă sau funcție apatridă destul de ușor de utilizat, care nu-i pasă de conținutul de rutare. Pur și simplu direcționează orice îi hrănești.

Ce se întâmplă dacă am vrea să facem mai multe subrutare?

Ușor țăran! Doar continuați să creșteți sau să vă reproiectați matricea de configurare a rutelor!

1611459669 230 Ghidul autostopistului pentru a reactiona la routerul v4 valoarea ascunsa
matrice de configurare a traseelor ​​dinamice

Vedea? Traseele din / Subiecte /: topicId ar putea fi pur și simplu o matrice ca rutele sale părinte. Dar am decis să fac mai bine și să invoc o funcție care apelează un API și returnează o nouă serie de rute (imaginați-vă că preia API-ul?).

Deci, cum putem verifica asta în aplicație?

Să punem un consolă.log în interiorul TopicDetail componentă și verificați ce primește:

1611459670 723 Ghidul autostopistului pentru a reactiona la routerul v4 valoarea ascunsa

Invoc rute () în consolă.log pentru că acum această subrută este o funcție! Tine minte? Toate bune! ?

1611459670 557 Ghidul autostopistului pentru a reactiona la routerul v4 valoarea ascunsa
console.log (routes ())

Da, Ma! Am făcut-o! Primim rutele în mod dinamic și le propagăm în subrute și componente. Este atât de grozav!

NoMatch și trasee ambigue

Aștepta! Unde este al nostru Nu se potrivesc Componenta?

Bine, să-l introducem în matricea noastră de configurare a rutei:

1611459671 392 Ghidul autostopistului pentru a reactiona la routerul v4 valoarea ascunsa

Observă asta : WhereTheHeckIsThat este o variabilă deoarece are colonul înainte.

La ce să ne așteptăm?

Să o vedem în acțiune:

1611459671 485 Ghidul autostopistului pentru a reactiona la routerul v4 valoarea ascunsa

Wow! De fapt, redă Nu se potrivesc dar redă și fișierul Vizualizare acasă. De ce?

Ei bine, ceea ce se întâmplă este că în cazanul nostru inițial am avut un asta a fost ridicarea primului care se potrivește cu calea îți amintești?

Deci, acum, deoarece nu avem comutatorul, se poate potrivi mai mult de o cale la un moment dat!

Acestea se numesc Rute ambigue. Routerul se potrivea cu /Acasă și în același timp /: WhereTheHeckIsThat pentru că este un fel de wildcard care acceptă totul.

Cum putem corecta asta?

Simplu: apuca înapoi!

1611459672 573 Ghidul autostopistului pentru a reactiona la routerul v4 valoarea ascunsa
s-a întors pentru a încheia ruta noastră.
1611459672 448 Ghidul autostopistului pentru a reactiona la routerul v4 valoarea ascunsa
Componenta acasă a fost singurul meci
1611459672 96 Ghidul autostopistului pentru a reactiona la routerul v4 valoarea ascunsa
Căile necunoscute declanșează componenta NoMatch

După cum puteți vedea mai sus, acum /Acasă este redat singur, pentru că l-a găsit și l-a returnat imediat.

Dacă introduceți o cale necunoscută în adresa URL, aceasta declanșează : / WhereTheHeckIsThat și redă Nu se potrivesc componentă ca implicit.

Buna treaba! Totul funcționează așa cum ne-am așteptat și acum avem un configurare puternică a matricei de rute ceea ce ne permite să avem multă flexibilitate.

Aceasta este într-adevăr valoarea ascunsă de a avea o abstractizare și de a defini o matrice de configurare a rutei!

Ultimul, dar nu cel din urmă

Acesta este sfârșitul Ghidului autostopistului pentru a reacționa la routerul v4.0!

Există încă câteva lucruri pe care trebuie să le acordați atenție, dar prefer să vă las să vă scufundați puțin în cazanele pe care le-am construit și să căutați ceea ce aveți nevoie în routerul React site-ul web.

M-am distrat atât de mult făcând acest Ghid, încât cred că voi începe să scriu din ce în ce mai mult 🙂

A fost bine nu numai pentru că am putut să vă învăț ceva, ci și pentru că am învățat multe și în acest proces.

GitHub Repo

Modificările pe care le-am făcut aplicației, pentru a produce acest articol, pot fi găsite în GitHub repo pentru partea 4.

Bibliografie

Pentru a face acest articol, am folosit documentația React Router pe care o puteți găsi aici.

Toate celelalte site-uri pe care le-am folosit sunt legate de-a lungul documentului pentru a adăuga informații sau pentru a oferi context la ceea ce am încercat să vă explic.

Acest articol face parte din seria 4 intitulată „Ghidul autostopistului pentru a reacționa la routerul v4”

  • Partea I: Router Grok React în 20 de minute
  • Partea II: [match, location, history] – prietenul tău cel mai bun!
  • Partea a III-a: căi recursive, la infinit și dincolo!

? Mulțumesc foarte mult!