Реацт Роутер је стандардна библиотека за рутирање у Реацт-у. Омогућава навигацију између погледа из различитих компоненти у Реацт апликацији, омогућава промену УРЛ-а претраживача и одржава УИ у синхронизацији са УРЛ-ом.
Да бисмо разумели како Реацт Роутер функционише, направимо једноставну апликацију за Реацт. Апликација ће укључивати компоненте куће, око и контакта. Користићемо Реацт Роутер за навигацију између ових компоненти.
питхон торке за сортирање
нпк цреате-реацт-апп
Ваше развојно окружење је спремно. Хајде сада да инсталирамо Реацт Роутер у нашу апликацију.
Реацт Роутер : Реацт Роутер се може инсталирати у вашу Реацт апликацију преко нпм-а. Пратите доле наведене кораке да бисте подесили рутер у вашој Реацт апликацији:
Корак 1: ЦД у директоријуму вашег пројекта, тј ., јава.
Корак 2: Користите следећу команду да бисте инсталирали Реацт Роутер:
нпм инсталл - -саве реацт-роутер-дом
Након што инсталирате реацт-роутер-дом, додајте његове компоненте у своју Реацт апликацију.
Додавање компоненти Реацт рутера:
Главне компоненте Реацт Роутера су:
Уместо да се прелази у низу, руте се бирају на основу најбољег подударања.
Да бисте додали компоненте Реацт рутера у своју апликацију, отворите директоријум пројекта у уређивачу који користите и идите на датотеку апп.јс. Сада додајте код испод у апп.јс.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Напомена: БровсерРоутер има псеудоним као Роутер.
Коришћење Реацт рутера: Да бисмо користили Реацт Роутер, хајде да прво направимо неке компоненте у Реацт апликацији. У директоријуму вашег пројекта, креирајте фасциклу под називом компоненте унутар срц фасцикле и сада додајте 3 датотеке под називом хоме.јс, абоут.јс и цонтацт.јс у фасциклу компоненти.
Хајде да додамо неки код у наше 3 компоненте:
Хоме.јс:
import React from 'react'; function Home (){ return } export default Home; Абоут.јс:
import React from 'react'; function About () { return <h2> jAVAtPOINT is a computer science portal for TUTORIALS!</h2> Read more about us at : <a href="https://www.javatpoint.in/about/"> https://www.javatpoint.in/about/ </a> } export default About; Цонтацт.јс:
import React from 'react'; function Contact (){ return You can find us here: <br> Javatpoint <br> G-13, second floor, Sector -3 Noida <br> Noida, Uttar Pradesh (201305) } export default Contact; Сада, хајде да укључимо компоненте Реацт Роутера у апликацију:
БровсерРоутер : Додајте псеудоним БровсерРоутер као рутер у датотеку апп.јс да бисте обмотали све остале компоненте. БровсерРоутер је родитељска компонента и може имати само једно дете.
class App extends Component { render() { return ( ); } } Линкови: Хајде сада да креирамо везе наших компоненти. Компонента Линк користи пропс да опише локацију до које линк треба да се креће.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Сада покрените своју апликацију на локалном хосту и кликните на креирану везу. Приметићете да се УРЛ адресе мењају у складу са вредношћу компоненте везе.
Рута : Компонента руте ће нам помоћи да успоставимо везу између корисничког интерфејса компоненте и УРЛ-а. Да бисте укључили руту у апликацију, додајте код у наставку у свој апп.јс.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Компоненте су сада повезане и кликом на било коју везу ће се приказати одговарајућа компонента. Покушајмо сада да разумемо прописе повезане са роот компонентом.
- Елемент се односи на компоненту која ће се приказати ако се путања подудара.
Напомена: Подразумевано, руте су инклузивне, што значи да више од једне компоненте руте може да одговара УРЛ путањи и истовремено рендерује. Ако желимо да прикажемо једну компоненту, овде морамо да користимо руте.
Руте : Да бисте прочитали једну компоненту, умотајте све руте унутар компоненте Руте.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Пребаците групе на више рута, пређите преко њих и пронађите прву која одговара путањи. Тако се приказује одговарајућа компонента путање.
цсс бацкгроунд
Ево нашег пуног изворног кода након додавања свих компоненти:
import React, { Component } from 'react'; import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom'; import Home from './component/home'; import Contact from './component/contact'; import About from './component/about'; import './App.css'; class App extends Component { render() { return ( <ul classname="App-header"> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul> <route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> ); } } export default App; </route></route></route> Сада можете да кликнете на везу и да се крећете кроз различите компоненте. Реацт Роутер одржава кориснички интерфејс ваше апликације синхронизован са УРЛ-ом.
Коначно, успешно смо имплементирали навигацију у нашу Реацт апликацију користећи Реацт Роутер.
А који користи АПИ историје ХТМЛ5 (догађаји пусхстате, реплацестате и попстате) да би ваш кориснички интерфејс био синхронизован са УРЛ-ом.
основно име: стринг
Основни УРЛ за све локације. Ако се ваша апликација испоручује из поддиректоријума на вашем серверу, желећете да је поставите у тај поддиректоријум. Правилно форматирано основно име мора да садржи почетну косу црту, али не и косу црту на крају.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
гетУсерЦонфирматион: фунц
Функција која се користи за потврду навигације. Подразумевано је коришћење виндов.цонфирм.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> форцеРефресх: боол
Ако је тачно, рутер ће користити освежавање целе странице на навигацији. Можда ћете желети да ово користите да бисте имитирали како би традиционална апликација која се приказује на серверу радила са освежавањем целе странице између навигације по страници.
КеиЛенгтх: број
Дужина локације. Кључ. Подразумевано је 6.
деца: чвор- подређени елемент за приказивање.
Напомена: На Реацт-у морате да користите један подређени елемент јер метода рендеровања не може да врати више од једног елемента. Ако вам треба више од једног елемента, можете покушати да их умотате у додатни или .
А који користи хеш део УРЛ-а (тј. виндов.лоцатион.хасх) да би ваш кориснички интерфејс био синхронизован са УРЛ-ом.
мицрицкетливе
Напомена: хеш не подржава локацију историје. Кључ или локација. Држава. У претходним верзијама покушали смо да смањимо понашање, али било је ивичних случајева које нисмо могли да решимо. Било који код или додатак који захтева ово понашање неће радити.
Пошто је ова технологија намењена да подржава само старије прегледаче, препоручујемо вам да уместо тога конфигуришете свој сервер за рад.
основно име: стринг
Основни УРЛ за све локације. Правилно форматирано основно име треба да има почетну косу црту, али не и задњу косу црту.
// renders <a href="#/calendar/today"> </a>
гетУсерЦонфирматион: фунц
Функција која се користи за потврду навигације. Подразумевано је коришћење виндов.цонфирм.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> хасхТипе: стринг
Кодирање које се користи за виндов.лоцатион.хасх . Доступне вредности су:
- 'коса црта' - креира хешове као што су #/ и #/сунсхине/лоллипопс
- 'носласх' - # и #сунсхине/лоллипопс . како хеш ствара
- 'хасхбанг' - креира 'ајак цравлабле' (застарео од стране гоогле) хешове попут #!/ и #!/сунсхине/лоллипопс
Подразумевано је 'коса црта'.
деца: чвор
Један подређени елемент за приказивање.
Пружа декларативно, приступачно кретање по вашој апликацији.
About
на: низ
Ниска репрезентација локације везе се креира комбиновањем имена путање локације, претраге и својстава хеша.
Објекат који може имати било које од следећих својстава:
на: фунц
Функција у којој се тренутна локација прослеђује као аргумент и која мора да врати приказ локације као стринг или објекат.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> заменити: боол
Када је тачно, клик на везу ће заменити тренутни унос уместо додавања новог
entry to the history stack.
интерни реф: фунц
Од Реацт Роутер-а 5.1, ако користите Реацт 16, не би вам требао овај пропс јер прослеђујемо реф основном . Уместо тога користите нормалан реф.
Омогућава приступ уграђеном реф.
пд мерге
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> иннерРеф: РефОбјецт
Од Реацт Роутер 5.1, ако користите Реацт 16, не би вам требао овај пропс јер прослеђујемо реф основном . Уместо тога користите нормалан реф.
Добијте основни реф компоненте користећи Реацт.цреатеРеф.
let anchorRef = React.createRef()
компонента: Реацт.Цомпонент
Ако желите да користите сопствену компоненту за навигацију, то можете учинити тако што ћете је проћи кроз компоненту проп.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Такође можете да пренесете реквизите на којима бисте желели да будете као што су наслов, ид, име класе итд.
Посебна верзија тога ће додати стилске атрибуте приказаном елементу ако се подудара са постојећим УРЛ-ом.
About
цлассНаме: стринг | фунц
цлассНаме може бити или стринг или функција која враћа стринг. Ако се користи функција цлассНаме, активно стање везе се прослеђује као параметар. Ово је корисно ако желите да искључиво примените цлассНаме на неактивну везу.
'nav-link' + (!isActive ? ' unselected' : '') } >
ФАКс
У Реацт Роутер в6, ацтивеЦлассНаме ће бити уклоњено и требало би да користите функцију цлассНаме да примените име класе на активне или неактивне компоненте НавЛинк-а.
АцтивеЦлассНаме: Стринг
класе да дају елемент када је активан. Подразумевана дата класа је активна. Биће комбиновано са параметром за име класе.
стил: објекат | фунц
стиле може бити објекат Реацт.ЦССПропертиес или функција која враћа објекат стила. Ако се користи стил функције, активно стање везе се прослеђује као параметар.
({ color: isActive ? 'green' : 'blue' })} > У Реацт Роутеру в6, активни стил ће бити уклоњен и морате користити стил функције да бисте применили инлине стилове на активне или неактивне НавЛинк компоненте.
Активан стил: објекат
Стилови примењени на елемент када је активан.
конвертовати стринг до датума
<navlink to="/faq" activestyle="{{" fontweight: 'bold', color: 'red' }} < pre> <h3>exact: bool</h3> <p>When true, the active class/style will only apply if the location is an exact match.</p> <pre> Profile </pre> <h3>strict: bool</h3> <p>If true, the trailing slash on a location's pathname will be considered when determining whether the location matches the current URL. See the documentation for more details.</p> <pre> Events </pre> <h3>isActive: func</h3> <p>A function to add additional logic to determine if the Link is active. This should be used when you want to do more than verify that the pathname of the Link matches the pathname of the current URL.</p> <pre> { if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 </pre> <h3>location: object</h3> <p>isActive Compares to the current history location (usually the current browser URL).</p> <h3>aria-current: string</h3> <p> <strong>The value of the area-current attribute used on the active Link. Available values are:</strong> </p> <ul> <li>'page' - used to indicate a link within a set of pagination links</li> <li>'Steps' - used to indicate a link within the step indicator for a step-based process</li> <li>'location' - used to indicate an image that is visually highlighted as the current component of the flow chart</li> <li>'date' - used to indicate the current date within the calendar</li> <li>'time' - used to indicate the current time within a timetable</li> <li>'true' - used to indicate whether NavLink is active</li> <li>'false' - used to prevent assistive technologies from reacting to the current Link (one use case would be to prevent multiple area-current tags on a page)</li> </ul> <hr></navlink> строг: боол
Ако је тачно, задња коса црта на називу путање локације ће се узети у обзир када се утврђује да ли се локација подудара са тренутном УРЛ-ом. За више детаља погледајте документацију.
Events
исАцтиве: фунц
Функција за додавање додатне логике да би се утврдило да ли је веза активна. Ово би требало да се користи када желите да урадите више од тога да проверите да ли се име путање везе подудара са именом путање тренутног УРЛ-а.
{ if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 локација: објекат
исАцтиве Упоређује са тренутном локацијом историје (обично тренутни УРЛ претраживача).
ариа-цуррент: стринг
Вредност атрибута ареа-цуррент који се користи на активној вези. Доступне вредности су:
- „страница“ – користи се за означавање везе унутар скупа веза за пагинацију
- „Кораци“ – користи се за означавање везе унутар индикатора корака за процес заснован на корацима
- 'локација' - користи се за означавање слике која је визуелно истакнута као тренутна компонента дијаграма тока
- 'датум' - користи се за означавање тренутног датума у календару
- 'време' - користи се за означавање тренутног времена унутар распореда
- 'труе' - користи се за означавање да ли је НавЛинк активан
- 'нетачно' - користи се да спречи помоћне технологије да реагују на тренутну везу (један случај употребе би био да се спречи више ознака тренутне области на страници)