React рутерът прави създаването на приложение за реакция много по-лесно. По същество това е инструмент, който ни позволява да управляваме маршрути във вашето уеб приложение, използвайки динамично маршрутизиране. Динамичното маршрутизиране се извършва, докато приложението се изобразява на вашата машина.
Стъпка 1: Инсталиране
React Router има общо три различни пакета: react-router
, react-router-native
и react-router-dom
.
Първият споменат react-router
обикновено никога не трябва да се инсталира директно. Този пакет предоставя всички основни компоненти и функции за маршрутизиране за приложения на React Router. От друга страна, другите две, споменати по-горе, които предоставят специфични за околната среда (браузър и React Native) компоненти, и двата също реекспортират всички експорти на react-router
.
В този урок ще се фокусираме върху react-router-dom
, пакетът, необходим за изграждане на уебсайтове в браузъра.
npm install --save react-router-dom
Стъпка 2: Избор на рутер
Преди да започнете нов проект за реакция, първо трябва да решите кой тип рутер да използвате. Използвайки “react-router-dom” рутера, който използваме за създаване на уебсайтове, има два компонента на рутера. <BrowserRouter>
и <HashRouter>
. <BrowserRouter>
трябва да се използва винаги, когато имате сървър, който ще обработва динамични заявки, докато <HashRouter>
трябва да се използва за статични уебсайтове.
Обичайна практика е да използвате <BrowserRouter>
, но ако уебсайтът ви се хоства на сървър, който има само статични файлове, тогава е по-добре с <HashRouter>.
Тъй като искаме този урок да се фокусира върху по-популярния от двата, ще се спрем на <BrowserRouter>
.
Стъпка 3: Изобразяване на рутера
Важно е да знаете, че компонентите на рутера очакват да получат само един дъщерен елемент. Тъй като случаят е такъв, е много полезно и обичайна практика да създадете <App>
компонент, който изобразява останалата част от вашето приложение.
import { BrowserRouter } from 'react-router-dom'; ReactDOM.render(( <BrowserRouter> <App /> </BrowserRouter> ), document.getElementById('root'));
Стъпка 4: Приложение
Дефинирахме нашето приложение в компонента <App>
. За да опростим още повече нещата, ще разделим нашето приложение на две части. Компонентът <Header>
ще съдържа всички връзки, от които се нуждаем, за да навигираме в уебсайта, а компонентът <Main>
е мястото, където ще визуализираме останалото съдържание.
function App() { return ( <div> <Header /> <Main /> </div> ); }
Компонентът <Route>
е основният градивен елемент на React Router. Навсякъде, където искате да изобразите съдържание въз основа на името на пътя на местоположението, трябва да използвате елемент <Route>
.
Стъпка 5: Път
Когато се използва a<Route>
, той ще очаква проп на пътя, това е просто низ, който описва името на пътя, на който съвпада маршрутът — например <Route path='/the-office'/>
трябва да съответства на име на път, което започва с /the-office
. Пътеката на текущите местоположения трябва да съответства на path
, ако е така, маршрутът ще изобрази React елемент. Ако пътят не съвпада, маршрутът няма да работи и нищо няма да бъде изобразено.
<Route path='/the-office'/> <Route exact path='/the-office'/>
Когато съответстващите маршрути реагират наистина се интересуват само от името на пътя, така че да кажем, че URL адресът е:
http://www.example.com/the-office
единствената част, за която React Router се притеснява, е /the-office
.
Стъпка 6: Създаване на маршрути
Възможно е да се create<Route>
s навсякъде вътре в рутера, но обичайна практика е всички маршрути да се рендират на едно и също място. Това може лесно да се направи чрез използване на компонента <Switch>
за групиране на <Route>
s. <Switch>
ще повтори всеки от своите дъщерни елементи, които са маршрутите, и ще изобрази само първия, който съответства на текущото име на пътя.
Пример за прост уебсайт с пътища са:
<Switch> <Route exact path='/' component={Home}/> <Route path='/the-office' component={theOffice}/> <Route path='/character' component={Character}/> </Switch>
Сега просто трябва да изобразим нашите маршрути. Ще изобразим нашите <Switch>
и <Route>
s вътре в нашия <Main>
компонент, това ще постави HTML, генериран от съвпадащ маршрут, вътре в <main>
DOM възел.
import { Switch, Route } from 'react-router-dom' function Main() { return ( <main> <Switch> <Route exact path='/' component={Home}/> <Route path='/the-office' component={theOffice}/> <Route path='/character' component={Character}/> </Switch> </main> ); }
Стъпка 7: Вложени маршрути
Както можете да видите, профилният маршрут /character/:number
не е включен в горния <Switch>
. Вместо това ще го изобразим от компонента <Character>
, който се изобразява винаги, когато името на пътя започва с /character
.
В рамките на компонента <Character>
ще визуализираме маршрути за два пътя:
/character
— Това ще бъде съпоставено само когато името на пътя е точно/character
./character/:number
— Този маршрут от друга страна използва параметър на пътя, той улавя частта от името на пътя, която идва след/character
.
function Character() { return ( <Switch> <Route exact path='/character' component={AllActors}/> . <Route path='/character/:number' component={Actor}/> </Switch> ); }
Стъпка 8: Параметри на пътя
Параметрите на пътя се използват, когато има променливи в името на пътя, които трябва да заснемем. Например, с нашия маршрут на профила на героя, ние искаме да уловим номера на героя. Можем да направим това, като добавим параметри на пътя към низа path
на нашия маршрут.
:number
на пътя /character/:number
е частта от името на пътя, която идва след /character/
и ще бъде уловена и съхранена като match.params.number
. Например името на пътя /character/6
ще генерира обект params:
{ number: '6' }
Стъпка 9: Връзки
И накрая, имаме нужда от нашето приложение, за да навигираме между страниците. Можем да направим това, като създадем връзки с помощта на anchor елемента. React Router предоставя компонента<Link>
, когато щракнете върху <Link>
, URL адресът ще бъде актуализиран и изобразеното съдържание ще се промени без презареждане на страницата.
import { Link } from 'react-router-dom' function Header() { return ( <header> <nav> <ul> <li><Link to='/'>Home</Link></li> <li><Link to='/roster'>Roster</Link></li> <li><Link to='/schedule'>Schedule</Link></li> . </ul> </nav> </header> ); }
<Link>
използва опората, за да опише местоположението, където трябва да навигира. Това може да бъде низ или обект за местоположение. Когато е низ, той ще бъде преобразуван в обект за местоположение
<Link to={{ pathname: '/character/9' }}>Actor #9</Link>
Успех с всичките ви начинания за кодиране, надявам се на този етап от статията да имате основни познания за това как да включите react рутер във вашето react приложение!!