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 приложение!!