Перейти до основного вмісту

Маршрутизація

Відмінна перевага веб-застосунку від десктопного це наявність URL при переході по якому користувач опиняється у певної частини програми. Так можна зберегти закладку або надіслати посилання іншому користувачеві, при цьому йому буде відображено той самий інтерфейс (за винятком приватних даних).

В першу чергу

Маршрутизація це не побічний ефект при написанні програми, навпаки, структуру навігації та набір сторінок необхідно продумувати в першу чергу.

Структура URL-рядка​

Аналогією URL-рядка може бути адреса за якою ви проживаєте: вулиця, будинок, квартири. Кожен стан інтерфейсу повинен мати свою адресу, свій URL. Те, що бачить користувач, стан інтерфейсу, має бути описано в URL.

url-string

Розберемо з яких частин може складатися будь-який URL.

  • https:// - протокол
  • mysite.com/ - хост
  • books/e3q76gm9lzk - шлях, то, де ми знаходимося у додатку
  • e3q76gm9lzk - url-параметр. Параметри бувають динамічними або статичними
  • ? - символ початку рядка запиту
  • ?category=adventure&status=unread - рядок запиту
  • category=adventure - пара параметр=значення
  • & - символ "І", розділяє параметри рядка запиту
  • #comments - якір (хеш), визначає положення на сторінці

Історія навігації​

Історія навігації описує, як ми переходимо по маршрутах (посиланням) додатків в поточній вкладці браузера, і, як ці переходи зберігаються та обробляються. Уявіть стопку листів, щоразу коли ми переходимо за посиланням, на верх стопки додається ще один лист з інформацією. Це називається стек історії. Використовуючи властивості та методи HTML5 History API, ми можемо переходити назад і вперед з історії користувача та маніпулювати її вмістом.

HTML5 History API

Якщо ви хочете глибше зрозуміти React Router, після знайомства з основними концепціями рекомендуємо повернутися та розібрати статтю A Little Bit of History.

Маршрутизація в React​

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

npm install react-router-dom