Ми розглянули основні концепції React Router — важливої бібліотеки для додавання маршрутизації у ваші React-додатки. Підсумуємо ключові моменти, які ми вивчили:

Встановлення

Перший крок — встановити бібліотеку React Router у ваш проєкт. Це можна зробити, виконавши наступну команду у каталозі проєкту:

npm install react-router-dom

Імпорт необхідних компонентів

Слід імпортувати необхідні компоненти з пакету react-router-dom у файли ваших компонентів. До таких компонентів належать BrowserRouter, Route, Routes, Link, NavLink. Ці компоненти є основою для створення та керування маршрутами.

Налаштування BrowserRouter

Щоб увімкнути функціональність маршрутизації у вашому додатку, потрібно обгорнути кореневий компонент у компонент BrowserRouter. Цей крок ініціалізує систему маршрутизації та дозволяє навігацію на основі URL-адреси.

Визначення маршрутів

Усередині компонента App (або відповідного компонента) можна визначати маршрути за допомогою компонентів Route та Routes. Компонент Route асоціює певний шлях із компонентом, який буде відображено, коли шлях збігається з поточним URL. Це визначає структуру та поведінку навігації вашого додатку.

Ліниве завантаження з Suspense

Для оптимізації продуктивності додатку можна реалізувати розділення коду та ліниве завантаження компонентів. Це досягається за допомогою функції lazy з React і обгортання імпортованого компонента у компонент Suspense. Ліниве завантаження забезпечує асинхронне завантаження компонентів за потреби, що покращує час початкового завантаження додатку.

Створення посилань

Можна створювати навігаційні посилання у додатку за допомогою компонентів Link або NavLink. Компонент Link використовується для переходу до певного маршруту без повного перезавантаження сторінки. Це забезпечує більш плавний та ефективний користувацький досвід.