Використання Web workers для розпаралелювання JavaScript
04.12.2019
Престиж учителя
04.12.2019
Показати всі

Основи React Router

React Router — це API для веб-додатків, які використовують бібліотеку React. Більшість поточних кодів написано з використанням  React Router 3, хоча вже була випущена версія 4. Маршрутизатор React використовує динамічну маршрутизацію (тобто маршрутизацію, яка здійснюється під час рендерингу вашої програми, а не в конфігурації  додатка).

Маршрутизатор React та динамічна маршрутизація на стороні клієнта дозволяє нам створити односторінковий веб-додаток з навігацією, не оновлюючи сторінку, під час навігації користувача. Для виклику компонентів маршрутизатор React використовує їх структуру, а далі  компоненти відображають відповідну інформацію.

Заважаючи оновленню сторінки та використанню маршрутизатора чи посилання, що пояснюється більш глибоко внизу, запобігає спалах білого екрана або порожня сторінка. Це один з найбільш поширених способів безперебійного користування. Роутер React також дозволяє користувачеві використовувати такі функції браузера, як кнопка «Назад» та «Оновити сторінку», зберігаючи правильний вигляд програми.

Для використання маршрутизатора React спочатку встановіть його, використовуючи yarn або npm:

 yarn add react-router-dom
npm install react-router-dom

Зауважте, що в документації та в API даний компонент називається Browser Router. Деякі люди вважають за краще просто посилатися на компонент як Router, тому ви можете створити його псевдонім Router:

import { BrowserRouter } from ‘react-router-dom’
//alternatively, aliased
import { BrowserRouter as Router} from ‘react-router-dom’

Якщо не використовується React Router, App часто є найвищим батьківським компонентом у програмах React. Однак з React Router компонент Router повинен бути найвищим батьківським компонентом. Це дозволяє всім компонентам використовувати всі можливості маршрутизатора, оскільки, як батьківський компонент, він передає всі свої реквізити своїм дітям, а отже, і всьому додатку.

Щоб налаштувати це просто включайте в index.js :

ReactDom.render (<Router> <App /> </Router>)

Для запобігання оновленню сторінки замість тега <a> треба використовувати компонент  <Link>. Наприклад, якщо ви хочете створити посилання на контактну інформацію, це робиться таким чином:

<Link to= “/contact”>Contact Us</Link>

Це посилання переведе користувача до /contact, і URL-адреса зміниться, не перезавантажуючи сторінку. Де саме його включити у додатку? Компонент Router функціонує як центр керування і з’єднує посилання з компонентом, який буде представлений на сторінці.

<Route path=»/contact» component={ContactPage} />

Як це досягається? Синтаксис «компонент =» — це як посилання на функцію зворотного виклику. Оскільки компоненти — це функції, а до функцій можна посилатися, то ви можете посилатися на компонент так само!

Встановлення path як просто «/» — дає змогу  відображати компонентна кожній сторінці. Це особливо корисно для таких речей, як панель навігації, колонтитул, кнопка перемикання для входу / виходу. Отже, у будь-який момент, коли в шляху є «/» — це збіг, і компонент візуалізується.

 

Дмитро Красношапка,
старший викладач кафедри
комп’ютерних технологій

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *