Ръководството на стопаджията за React Router v4: [мач, местоположение, история] - вашите най-добри приятели!

Хей! Добре дошли в Ръководството на стопаджията за React Router v4, Част II!

Сега, когато настроихме топката да се търкаля с първото ни малко приложение, нека се съсредоточим върху трите ви партньори за пътуване: мач , местоположение и история .

Какво се случва, ако влезете в кода на вашия домашен компонент и поставите там console.log, за да проверите реквизита?

Рутерът въвежда във вашия компонент следните обекти:

Еха! Откъде идва това? ?

Е, всеки изглед, компонент или каквото и да е, обгърнато от рутера, има тези обекти. върши работата си като компонент от по-висок ред и обвива вашите компоненти или изгледи и инжектира тези три обекта като подпори вътре в тях.

И така ... защо са там и каква полза от тях? ?

Те ще бъдат най-добрите ви приятели! Вярвай ми! ?

Съвпада

В мач обект съдържа информация за това как съответства на URL адреса.

  • params : (обект), двойки ключ / стойност, анализирани от URL адреса, съответстващ на динамичните сегменти на пътя
  • isExact : (boolean), вярно, ако целият URL е съвпаднал (без последващи знаци)
  • path : (низ), моделът на пътя, използван за съвпадение. Полезно за изграждане на вложени маршрути . Ще разгледаме това по-късно в една от следващите статии.
  • url : (низ), съответстващата част на URL адреса. Полезно за изграждане на вложени връзки.

Така че в компонента Home имаме този обект на съвпадение :

isExact е true, тъй като целият URL адрес е съвпаднал, обектът params е празен, защото не сме предали нищо в него, стойностите на пътя и url ключа са равни, потвърждавайки, че isExact е true.

Сега нека да разгледаме изгледа TopicList :

До този момент няма нищо ново, същата история като в Home View , показваща пътя и URL адреса на TopicList .

Но какво, ако разгледаме TopicDetails ?

Добре, какво имаме тук?

isExact продължава да е вярно, тъй като целият URL адрес е съвпаднал. params обектът носи topicId информация, която е била предадена в компонента.

Обърнете внимание как topicId е променлива.

Но къде приема стойността Topic1 ?

Просто, извиквате го по изричен начин в TopicList Links .

Проверете как използвахме съвпадение за TopicList, за да знаем URL адреса му.

Тази връзка може да бъде динамична . По-късно ще направя един пример, където можете Връзка с относителен път, когато вие не знаете предварително, ако това е Topic1 или Topic3520 .

Но…

В коя ситуация isExact е фалшив?

Е ... нека ви дам един пример:

В тази ситуация въведохме / HelloWorldSection в URL адреса на браузъра.

Това, което се случва, е, че рутерът не знае пълния път към HelloWorldSection, така че ви пренасочва до мястото, където знае пътя.

isExact показва false, който ви казва точно, че „ целият URL адрес не е съвпаднал “.

Това е много полезно, както ще видите веднага щом започнете да правите СПА с RRv4!

Само за да завършим нашия подход за съвпадение, проверете това:

Използвахме match.params.topicId, за да отпечатаме на екрана името на нашата тема.

Това е едно от най-често срещаните употреби за мач .

Разбира се, той има множество приложения. Да предположим, че трябва да извлечем API с тази информация за topicId . ?

Местоположение

Обектът за местоположение представя къде е приложението сега, къде искате да отиде или дори къде е било.

Той се среща и в history.location, но не бива да го използвате, защото е променлив.

А място обект никога не е мутирал, така че можете да го използвате в куките за жизнения цикъл да се определи кога навигация случва. Това е наистина полезно за извличане на данни или DOM странични ефекти.

Нека console.log (местоположение) в Home View :

Нека не се гмуркаме много и да запазим с неговата проста функционалност.

Имате ключ / стойност на името на пътя .

Можете да го използвате например, за да проверите дали името на пътя се е променило:

Можеш или към него. Можете да направите history.push или history.replace, както ще видим по-късно.

Можете да създадете персонализиран обект и да го използвате

  • history.push (locationX)

Можете също да го предадете в и компоненти.

Това ще им попречи да използват действителното местоположение в състоянието на рутера. Може би искате да излъжете компонент да се изобрази на различно място от реалното?

Достатъчно местоположение сега ...

Да преминем към историята !

История

Обектът история ви позволява да управлявате и обработвате историята на браузъра във вашите изгледи или компоненти.

  • дължина : (брой), броят на записите в стека на историята
  • действие : (низ), текущото действие (PUSH, REPLACE или POP)
  • местоположение : (обект), текущото местоположение
  • push (път, [състояние]) : (функция), избутва нов запис в стека на историята
  • replace (път, [състояние]) : (функция), замества текущия запис в стека на историята
  • go (n) : (функция), премества показалеца в стека на историята с n записи
  • goBack () : (функция), еквивалентно на go (-1)
  • goForward () : (функция,) еквивалентно на go (1)
  • блок (подкана) : (функция), предотвратява навигацията

Така че нека console.log обекта история в нашия изглед Начало и да видим какво показва:

Добре, точно това, което очаквахме.

Той ни казва, че сме пристигнали тук с действие PUSH , че дължината на обекта е 40 (докато навигирате през историята на приложението си, нараства до 50 и спира там, изхвърляйки по-старите записи и запазвайки размера му всеки път, когато приложението натисне друго влизане в историята в обекта).

Дава ни информация за местоположението .

Отново обектът за история е променлив . Затова е препоръчително да имат достъп до мястото, от рендера подпори на Route , а не от history.location .

Това гарантира, че вашите предположения за React са правилни в куките на жизнения цикъл.

Например:

Обикновено можете да го използвате, за да промените URL пътя на браузъра.

В примера по-долу избягваме и създайте бутон, който натиска история:

Разбира се, можете да го използвате за задействане на промяната на URL след извличане на данни или странични ефекти.

Удобно е да го използвате в средата на JSX, където не искате да извиквате компоненти. Можете просто да се върне на историята тласък и да предизвика рутер да актуализирате URL адреса на браузъра.

Не на последно място

Мисля, че по това време вече имате добра идея как да използвате мача , местоположението и историята .

Не направих никакви промени в първоначалния ни шаблон, така че не се колебайте да играете с него в същото репо, предоставено в част 1 от това ръководство.

05. Библиография

За да направя тази статия, използвах документацията на React Router, която можете да намерите тук.

Всички други сайтове, които съм използвал, са свързани заедно с документа, за да добавят информация или да предоставят контекст на това, което се опитах да ви обясня.

Тази статия е част 2 от поредица, наречена „Ръководство на стопаджията за React Router v4“

  • Част I: Grok React Router за 20 минути
  • Част III: рекурсивни пътеки, до безкрайността и отвъд!
  • Част IV: конфигурация на маршрута, скритата стойност на дефиниране на масив от конфигурация на маршрут

? Благодаря ти много!