Дізнайтеся React Router за 5 хвилин - Підручник для початківців

Іноді у вас залишається лише 5 хвилин. Замість того, щоб витрачати його на соціальні медіа, давайте 5-хвилинну вступну версію React-Router! У цьому підручнику ми збираємось вивчити основи маршрутизації в React, побудувавши навігацію для веб-сайту в’язального магазину Scrimba. Це не реально, але, можливо, одного дня ...;)

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

Що взагалі таке React-Router?

Багато сучасних веб-сайтів насправді складаються з однієї сторінки, вони просто схожі на декілька сторінок, оскільки містять компоненти, які відображаються як окремі сторінки. Вони, як правило , називають як СПАС - S ingle- р віку через pplications. По суті, React Router робить умовно візуалізацію певних компонентів для відображення залежно від маршруту, який використовується в URL-адресі ( /для домашньої сторінки, /aboutпро сторінку про програму тощо).

Наприклад, ми можемо використовувати React Router для підключення www.knit-with-scrimba.com/ до www.knit-with-scrimba.com/about або www.knit-with-scrimba.com/shop

Звучить чудово - як я ним користуюся?

Щоб використовувати React Router, спочатку потрібно встановити його за допомогою NPM:

npm install react-router-dom 

Крім того, ви можете просто скористатися цим дитячим майданчиком у Скрімбі, у якому вже написаний заповнений код.

Вам потрібно буде імпортувати BrowserRouter, Route та Switch from react-router-dompackage:

import React, { Component } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

У своєму прикладі я пов'язую цільову сторінку з двома іншими "сторінками" (які насправді є лише компонентами), що викликаються Shopта About.

По-перше, вам потрібно буде налаштувати програму для роботи з React Router. Все, що відображається, потрібно буде проникнути всередину елемента, тому оберніть свій додаток тим самим . Це компонент, який виконує всю логіку відображення різних компонентів, які ви йому надаєте.

// index.js ReactDOM.render(   , document.getElementById('root') ) 

Далі, у компонент програми додайте Switchелемент (відкриті та закриваючі теги). Вони гарантують, що одночасно відображається лише один компонент. Якщо ми не використовуємо це, ми можемо встановити за замовчуванням Errorкомпонент, який ми будемо писати пізніше.

function App() { return (     ) } 

Настав час додати свої теги. Це посилання між компонентами і їх слід розміщувати всередині тегів.

Щоб сказати тегам, який компонент завантажувати, просто додайте pathатрибут та ім’я компонента, який потрібно завантажити за допомогою componentатрибута.

Багато URL-адреси домашньої сторінки - це назва сайту, за якою слідує "/", наприклад, www.knit-with-scrimba.com/ . У цьому випадку ми додаємо exactдо тегу Route. Це пов’язано з тим, що інші URL-адреси також містять «/», тому, якщо ми не скажемо програмі, що їй потрібно шукати просто /, вона завантажує першу, яка відповідає маршруту, і ми отримуємо досить хитру помилку, з якою потрібно боротися.

function App() { return (        ) } 

Тепер імпортуйте компоненти в додаток. Можливо, ви захочете мати їх в окремій папці "компоненти", щоб зберегти код чистим і читабельним.

import Home from './components/Home'; import About from './components/About'; import Shop from './components/Shop'; 

На те повідомлення про помилку, про яке я згадав раніше, яке завантажується, якщо користувач вводить неправильну URL-адресу. Це як звичайний тег, але без шляху. Компонент Помилка містить

Oops! Page not found!

. Не забудьте імпортувати його в додаток.

function App() { return (         ) } 

Поки що на нашому веб-сайті доступна лише введення URL-адрес. Щоб додати на сайт посилання, які можна натиснути, ми використовуємо Linkелемент з React Router і налаштовуємо новий Navbarкомпонент. Ще раз не забудьте імпортувати новий компонент до програми.

Тепер додайте Linkдля кожного компонента в програму та використовуйте to="URL"для їх зв’язування.

function Navbar() { return ( Home  About Us  Shop Now ); }; 

Тепер на вашому сайті є посилання, які можна натиснути, щоб перейти навколо вашого односторінкового додатка!

Висновок

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

Щоб дізнатись більше про React Hooks та інші чудові можливості React, ви можете приєднатися до списку очікування мого майбутнього вдосконаленого курсу React.

Або якщо ви шукаєте щось більш дружнє для початківців, ви можете ознайомитися з моїм вступним курсом на React.

Щасливого кодування;)