Апликација за једну страницу (СПА) је веб локација или веб апликација која динамички преписује постојећу веб страницу новим информацијама са веб сервера.

У Реацт апликацији, компоненте преузимају садржај сајта и приказују га у једну ХТМЛ датотеку у вашем пројекту.

Реацт Роутер вам помаже да се крећете до компоненте по вашем избору и приказује је у ХТМЛ датотеци. Да бисте га користили, морате знати како да подесите и интегришете Реацт Роутер са Реацт апликацијом.

Како инсталирати Реацт рутер

Да бисте инсталирали Реацт Роутер у свој Реацт пројекат користећи нпм, ЈаваСцрипт менаџер пакета, покрените следећу команду у директоријуму вашег пројекта:

нпм и реацт-роутер-дом

Алтернативно, можете преузети пакет користећи Иарн, менаџер пакета који вам омогућава да инсталирате пакете библиотеке ван мреже.

Да бисте инсталирали Реацт Роутер користећи Иарн, покрените ову команду:

иарн адд реацт-роутер-дом@6

Подешавање Реацт рутера

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

увоз Реаговати из'реаговати';
увоз РеацтДОМ из'реацт-дом/цлиент'; 
увоз Апликација из'./Апликација';
увоз {БровсерРоутер} из'реаговати-рутер-дом';
конст роот = РеацтДОМ.цреатеРоот( документ.гетЕлементБиИд('корен') );
роот.рендер(


 </BrowserRouter>
);

Умотавање компоненте апликације у БровсерРоутер елемент даје целој апликацији пун приступ могућностима рутера.

Рутирање ка другим компонентама

Након подешавања рутера у апликацији, требало би да кренете даље и креирате компоненте апликације, усмерите их и рендерујете. Следећи код увози и креира компоненте под називом „Почетна“, „О“ и „Блог“. Такође увози Рута и Руте елементи из реаговати-рутер-дом.

Своје руте ћете дефинисати унутар Апликација саставни део:

увоз { Руте, рута } из'реаговати-рутер-дом';
увоз Кућа из'./Кућа';
увоз О томе из'./О томе';
увоз Блог из'./Блог';
функцијаАпликација() {
повратак (

'/' елемент={ } />
'/О томе' елемент={ } />
'/блог' елемент={ }/>
 </Routes>
 )
}
извозУобичајено Апликација;

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

Тхе Руте елемент је надређени елемент који обавија појединачне руте које креирате у компоненти апликације. Тхе Рута елемент креира једну руту. Потребна су два проп атрибута: а пут и један елемент.

Тхе пут атрибут дефинише УРЛ путању предвиђене компоненте. Прва рута у горњем блоку кода користи обрнуту косу црту (/) као своју путању. Ово је посебна рута коју ће Реацт прво рендеровати, тако да Кућа компонента приказује када покренете своју апликацију. Не мешајте овај систем са имплементирање условног рендеровања у вашим Реацт компонентама. Можете дати ово пут припишите било које име које желите.

Тхе елемент атрибут дефинише компоненту коју Рута ће рендер.

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

На пример:

увоз { Линк } из'реаговати-рутер-дом';
функцијаКућа() {
повратак (



'/О томе'>О страници</Link>
'/блог'>Страница блога</Link>
Ово је почетна страница
 </div>
 )
}
извозУобичајено Кућа;

Тхе линк компонента је скоро идентична ХТМЛ сидреној ознаци, само користи атрибут под називом "то" уместо "хреф". Тхе линк компонента навигира до руте са одговарајућим именом путање као њеним атрибутом и приказује компоненту руте.

Угнежђено рутирање и како га имплементирати

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

Када креирате компоненте које желите да усмерите, развићете индивидуалне руте за сваку од њих у апликација саставни део.

На пример:

увоз { Руте, рута } из'реаговати-рутер-дом'; 
увоз Чланци из'./Чланци';
увоз НевАртицле из'./НевАртицле';
увоз АртицлеОне из'./АртицлеОне';
функцијаАпликација() {
повратак (

'/артицле' елемент={ }/>
'/артицле/нев' елемент={ }/>
'/члан 1' елемент={ }/>
 </Routes>
 )
}
извозУобичајено Апликација;

Блок кода изнад увози и усмерава креиране компоненте Чланци, НевАртицле, и АртицлеОне. Постоје неке сличности у УРЛ путањама између ове три руте.

Тхе НевАртицле Име путање руте почиње исто као и Чланци Име путање руте, са додатом обрнутом косом цртом (/) и речју „ново“, тј. (/нов). Једина разлика између имена путање Чланци Рута и АртицлеОне Рута је коса црта (/1) на крају АртицлеОне име путање компоненте.

Можете да угнездите три руте уместо да их оставите у њиховом тренутном стању.

Овако:

увоз { Руте, рута } из'реаговати-рутер-дом';
увоз Чланци из'./Чланци';
увоз НевАртицле из'./НевАртицле';
увоз АртицлеОне из'./АртицлеОне';
функцијаАпликација() {
повратак (

'/артицле'>
 }/>
'/артицле/нев' елемент={ }/>
'/члан 1' елемент={ }/>
 </Route>
 </Routes>
 )
}
извозУобичајено Апликација;

Упаковали сте три појединачне руте у један Рута елемент. Имајте на уму да родитељ Рута елемент има само пут атрибут и бр елемент атрибут који дефинише компоненту за рендеровање. Тхе индекс атрибут у првом детету Рута елемент специфицира да ово Рута приказује када одете до УРЛ путање родитеља Рута.

Да би ваш код био бољи и лакши за одржавање, требало би да дефинишете своје руте у компоненти и увезете их у апликација компонента за употребу.

На пример:

увоз { Руте, рута } из'реаговати-рутер-дом';
увоз Чланци из'./Чланци';
увоз НевАртицле из'./НевАртицле';
увоз АртицлеОне из'./АртицлеОне';
функцијаАртицлеРоутес() {
повратак (

 }/>
'/артицле/нев' елемент={ }/>
'/члан 1' елемент={ }/>
 </Routes>
 )
}
извозУобичајено АртицлеРоутес;

Компонента у блоку кода изнад садржи угнежђене руте које су раније биле у компоненти апликације. Након креирања компоненте, требало би да је увезете у апликација компоненту и рутирајте је помоћу једног Рута елемент.

На пример:

увоз { Руте, рута } из'реаговати-рутер-дом';
увоз АртицлеРоутес из'./АртицлеРоутес';
функцијаАпликација() {
повратак (

'/артицле/*' елемент={ }>
 </Routes>
 )
}
извозУобичајено Апликација;

У финалу Рута компонента, додани симболи обрнуте косе црте и звездице на крају имена путање руте обезбеђују да име путање одговара било ком имену путање које почиње са (/чланак).

Има још тога за реаговање рутера

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

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