Водич за аутостопере како реаговати на рутер в4: Грок реагујте на рутер за 20 минута

Здраво колега Реацт Хитцххикер! Желите вожњу Реацт Роутером? Ускочите. Идемо!

Да бисмо разумели филозофију Реацт Роутера, морамо знати шта је апликација са једном страницом (СПА).

Шта је апликација на једној страници?

У основи се ради о веб апликацији или веб локацији која комуницира са корисником динамичким преписивањем тренутне странице, уместо да читаве нове странице учита са сервера.

Зашто је ово тако добро ?!

1. избегава прекид корисничког искуства између узастопних страница

2. чини да се апликација понаша више попут радне површине

3. сви ресурси кода се динамички учитавају и додају на страницу по потреби, обично као одговор на радње корисника

4. јер је кевл и кевл и изузетно ултра-широк-4К-ниво-кевл. ?

СПА-ови су сада индустријски стандард и многе компаније траже да пронађу програмере за развој својих пројеката.

Шта је Реацт Роутер?

Реацт Роутер је алат који вам омогућава руковање рутама.

Пошто имате посла са СПА-ом, потребан вам је начин да покренете садржај који се учитава на екрану. Реацт Роутер представља концепт назван „Динамичко усмјеравање“, који се прилично разликује од „Статичког усмјеравања“ на који смо навикли.

Када имате посла са „статичким усмјеравањем“, своје руте пријављујете као дио иницијализације апликације прије било каквог приказивања (Раилс, Екпресс, Ембер, Ангулар итд.).

„Динамичко усмеравање“ значи да се усмеравање одвија док се ваша апликација приказује, а не у конфигурацији или конвенцији изван покренуте апликације.

Реацт Роутер в4 заступа и примењује приступ усмјеравању заснован на компонентама.

Пружа различите компоненте рутирања у складу са потребама апликације и платформе.

У овом конкретном случају ћемо истражити   јер желимо да користимо „динамичко усмеравање“ у контексту „веб апликације“, а остале оставимо за друге околности.

Ко је креирао Реацт Роутер?

Ова два невероватна људска бића, Мицхаел Јацксон и Риан Флоренце. И заслужују товаре, тоне пљеска! Заједно су започели Реацт Траининг.

У данашње време, исправите ме ако грешим, ишли су одвојеним путевима:

Мицхаел Јацксон наставља да развија Реацт Траининг.

Риан Флоренце је створио Реацх.Тецх.

Да ли Реацт Роутер има везе са Редуком?

Не. Иако се обично појављују заједно.

Да ли сте сигурни? Да ? Сигуран сам ?

Обоје су сјајни и неопходни алати, а како су компоненте вишег реда (у основи ЈаваСцрипт функције које узимају компоненту и враћају нову), тако да је уобичајено да их се нађе заједно.

Поставка, прљајмо руке

Да бисмо вас водили кроз овај поступак, користићемо Цреате Реацт Апп (ЦРА).

На крају ћете добити чисти образац за израду једноставних веб страница.

Ако вам је случајно Реацт или Цреате Реацт Апп ван дохвата руке, препоручујем вам да прво уђете у њих, а затим се вратите са шољом кафе.

У реду, онима који су стали уз мене: након инсталирања ЦРА, морате инсталирати пакет реакционих рутера.

Ако користите нпм, само отворите терминал, идите у директоријум ЦРА и унесите:

npm i -S react-router-dom

или

yarn add react-router-dom-ако користите предиво као менаџера пакета.

Само да проверим ваш пакет.јсони уверите се да је све у реду, ево мог:

Као што видите? У овом тренутку имамо реакцију-роутер-дом као зависност.

Готово, нпм или почетак пређе и…

Банг! Јашемо Ма!

Апликација коју градимо

Направимо једноставну личну веб страницу са траком за навигацију која омогућава кориснику да прелази са једног на други садржај. Наша веб локација имаће три главна одељка под називом Почетна , О нама и Теме .

Траке за навигацију ће бити свеприсутна компонента док Насловна , О и теме ће бити донесена у наставку према путевима одабраних.

Да ли видите УРЛ прегледача: лоцалхост: 3000 / хоме на снимку екрана испод?

То значи да је Главна траса се активира и Почетна поглед је изречена.

Ово ће бити наш коначни резултат:

А ово ...?, Ово је веб страница?

? Да, јесте!

Голи! Само покушајте да не осећате пристрасност према другим сложеностима попут стила и тако даље! Не желим да вам смета било шта друго, осим кукања како је једноставно имплементирати Реацт Роутер в4 .

Дакле, након што се опоравите од шока,?, Направимо следећи корак и погледајте моју датотеку /срц/индек.јс.

/срц/индек.јс

индек.јс је прва датотека коју ЦРА учитава, тачка иницијализације свега у вашој апликацији.

Погледајмо шта сам урадио:

Па шта ми радимо овде?

  • Увозимо компонента из зависности коју смо инсталирали и наводећи да ћемо је позвати од овог тренутка:

import { BrowserRouter as Router } from ‘react-router-dom’;

  • Увозимо а компоненту, коју сам креирао, са рутама које ћемо користити на нашој веб локацији - не брините сада са овом компонентом:

import { Routes } from ‘./routes’;

Тхе компонента заузима место задате ЦРА  саставни део. У основи је исто - управо сам га назвао јер сматрам да има смисла код учинити смисленијим и читљивијим.

Више не учитавате јединствену апликацију, већ компоненту Руте која ће руковати рутама и која ће покренути монтирање и приказивање компонената које ће се учитати унутар сваке руте.

  • Прихватамо се са саставни део.

Заправо, ради као компонента вишег реда која убудуће само познаје своју децу и комуницира с њима у ширем опсегу, независно од тога ко и колико их има.

Не морате да бринете како функционише да бисте га користили. Ово је много дубља и напреднија ствар.

Само се потрудите да разуметеда Реацт.ДОМ више не учитава једноставну апликацију . Учитава апликацију загрљену ​​компонентом која се назива Routerвиша инстанца или опсег може да комуницира с њом и са прегледачем DOM.

Ком понент

Дакле, у основи шта ради роутес.јс ?

Почиње увозом Реацт-а и неколико компоненти које ћемо погледати касније. Замислите их само као једноставне компоненте без држављанства: Хоме , Абоут , ТопицЛист , ТопицДетаил , НавБар и НоМатцх .

Такође увози три компоненте из пакета респонсе-роутер-дом на које ћемо морати да се позовемо:, и .

Након увоза извозимо компоненту Роутес без држављанства која позива NavBar(која ће увек бити на екрану) и а саставни део.

Чиме се овај тип бави?

Ова компонента у основи даје прво дете или која се подудара са локацијом прегледача.

Почиње да тестира овакве ствари: „да ли је УРЛ прегледача у овоме стаза? Не? У реду." Следећа рута. „Да ли је УРЛ прегледача у овој другој путањи путање? Не."

Следећа рута. „Ох, схватила сам! У овом је, хајде да покренемо рендеровање компоненте и до сада завршимо проверу (не занимају ме остале руте у наставку ...) “

Ако се којим случајем ово догоди:

друга рута се никада неће покренути јер ће Свитцх скочити пре него што стигне до ње. Одлази само на кафу ... (и ја такође !!!? Назад!)

У дефинишемо сваку .

Свака каже ово прегледачу:

„Хеј претраживач ДОМ! Ако бира мене јер је ваша локација (тачно) ова, прикажите следећу компоненту “.

Или у другим случајевима, попут овог доле, стоји:

„Хеј, прегледачу, ако је у неком случају твој одабрао мене јер локација је / Теме / „нешто“ приказује детаље о компоненти теме. Свакако ће сазнати ко је ово: топицИд (променљива) ствар за коју корисник тражи да је подударимо и усмери је у складу с тим “.

Ок сви. Јер има ово подразумевано понашање провере сваке руте, морамо да пружимо резервни случај у случају да се не подудара ни са чим:

Ова последња рута једноставно приказује задану страницу у којој се наводи да се не подудара ниједна рута, врста ХТТП 404 грешке.

Запамтите да овде имамо посла са СПА-ом и „динамичким усмеравањем“, па је ово симулација као да захтевамо руте до сервера? Заправо нисмо!

Једноставно не знамо шта да прикажемо ако корисник, на пример, у УРЛ убаци нешто што се не подудара, попут овог: // лоцалхост: 3000 / ХеллоВорлд .

Како ова рута није дефинисана, нудимо компоненту НоМатцх да бисмо их обавестили о непостојању руте.

постоји, јер ако корисник покуша да учита УРЛ без икакве руте // лоцалхост: 3000 / , добио би НоМатцх јер за њега није дефинисана рута. Дакле, најбољи начин да се ово реши је коришћење  и потисните корисника до руте / Хоме, која је подразумевано наш први екран апликације.

Зашто је ово неопходно?

Опет, јер би обично корисник покренуо апликацију тако што би откуцао њен општи УРЛ и без прва приказана компонента би била . Ми то не желимо, желимо да корисник буде преусмерен на саставни део.

Погледи и / или компоненте

У овом тренутку у нашем водичу, желео бих да се мало зауставим како бих разликовао поглед од компоненте. Ово није суштина овог водича, али имаће смисла након што вам покажем структуру директоријума моје ЦРА .

Када „размишљамо у реакцији“ и почнемо да правимо апликацију и она почне да расте, понекад зауставимо јер осећамо да ствари нису на правом месту.

То значи да тим стварима морамо дати имена и држати их одвојене у различитим „фиокама“ или „фасциклама“.

Прикази и компоненте су ствари које се сликају на екрану. Дакле, шта разликује једну ствар од друге?

А зар погледи нису компоненте? А компоненте нису погледи?

Па, што се тиче језика кодирања, Виев и Цомпонент су сигурно функције или класе - компоненте без држављанства или компоненте са статусом како их називамо у Реацт жаргону.

Па, шта их разликује?

Па, Поглед има руту. Унутар овог приказа можете приказати пуно компоненти.

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

Ово је врло једноставан концепт који се мора разумети на почетку, чим почнемо да радимо тако малу апликацију као лична почетна страница.

Погледајмо моју структуру директоријума ЦРА:

Као што видите, ја - и 99% света - волим да држим поморанџе и крушке у различитим корпама. Па тако и ти! Имам поверења у тебе! Верујем ти!

Пуно је образаца о томе како организовати ове ствари и много расправа започиње када уведемо више пакета попут Редук-а који помало трансформишу архитектуру апликације или када желимо на екрану да сликамо Контролне табле, Додаци, Бициклизам Свиње или неке чудније ствари ...

Али, да бисте разликовали концепте, пажљиво погледајте Погледе и компоненте.

Погледи Хоме , Абоут , ТопицЛист и НоМатцх су. Они имају своје одговарајуће руте које их покрећу.

НавБар је свеприсутна компонента која се увек позива. Нема пут.

ТопицДетаилс је компонента која ће приказати информације о теми када се покрене рута ТопицЛист /: топицИд . То је компонента за вишекратну употребу која се може увести на друга места и преправити или проширити. Нема одређену руту.

Дом / О погледима

Унутар директоријума Хоме имам датотеку индек.јс и датотеку Хоме.јс.

Добра пракса је имати индек.јс за извоз осталих датотека. Само ми верујте или понесите мало вина јер ће ово бити дуг разговор?

... ох, само да попијемо вино и разговараћемо касније! ?

Ово је једноставан поглед који само извози свој наслов. О поглед је једнак овоме.

Погледајмо сада поглед ТопицЛист јер је мало другачији.

ТопицЛист и ТопицДетаил Виевс

Дакле, ТопицЛист Виев има овај детаљ руковања различитим рутама. Запамтите то / Топиц /: топицИд усмери то рекао пустити ТопицДетаил да обрађује?

Ево нас са тим.

ТопицЛист прима {матцх} као реквизит. Не дозволите да вас функција деструктурирања плаши. Једноставно смо могли да примимо реквизите и позовемо пропс.матцх . То је једноставно како сва кул деца данас реконструишу реквизите да би побољшали читљивост и реаговали проток. Такође ми се много свиђа! То је некако као да подигнете кутију са својим мобилним телефоном или да директно подигнете мобилни. Заправо је био чуван у кутији, али у овом тренутку морате само да проверите своју е-пошту? па нека кутија остане тамо где јесте! Не носите га са собом на посао!

У сваком случају, будимо фокусирани на код.

У ову датотеку увозимо компоненту из Реацт Роутера под називом {Линк} јер желимо да направимо везе?

Добијамо подударање са Руте коју смо изабрали када кликнемо на Теме и приказујемо неуређену листу са 3 опције: Тема1 , Тема2 и Тема3 .

У основи, ако корисник на екрану одабере везу Топиц1 ,ће гурнути УРЛ прегледача на ту путању / Теме / Тема1 .

Шта се даље дешава? и откријте да се УРЛ променио и погледајте њихове информације да бисте проверили коју руту треба активирати. Тако откривају да је сада покренута рута `она за / Топицс /: топицИд и покреће приказивање ТопицДетаил . ТопицДетаил ће приказати детаље Топиц1 .

ТопицДетаил прима подударање од рутера и приказује топицИд који се налази на матцх.парамс.топицИд .

НавБар компонента

Траке за навигацију компонента има посебну улогу јер је свеприсутан.

Његова функција је да омогући кориснику да се креће по веб локацији и да прикаже доступне одељке (руте).

Као што сте видели на почетку, унутра је али споља тако да ће сваки поглед увек бити састављен са НавБар-ом на врху.

Као што видите, његова улога је основна. Само снабдева и казује питати да покрене изабрани и прикажите га на екрану.

На крају, али не мање важно

Мислим да у то време вероватно већ основно разумете како Реацт Роутер ради и да се може користити за израду једноставне веб странице.

Ако желите да проверите код или га тестирате, можете повући мој репо, доступан на ГитХуб-у.

Библиографија

Да бих направио овај чланак, користио сам документацију Реацт Роутер-а коју можете пронаћи овде.

Све друге веб локације које сам користио повезане су уз документ како би се додале информације или пружио контекст ономе што сам покушао да вам објасним.

Овај чланак је део 1. серије под називом „Аутостоперски водич за реаговање рутера в4“. Делови 2–4 долазе на фрееЦодеЦамп током ове недеље!

  • ИИ део: [меч, локација, историја] - ваши најбољи пријатељи!
  • ИИИ део: рекурзивни путеви, до бесконачности и даље!
  • Део ИВ: конфигурација руте, скривена вредност дефинисања низа конфигурације руте

Много вам хвала!