Пошук уроків, статей та іншого контенту
З’ясуєте, як SPA змінює вміст сторінки без повного перезавантаження та яку роль у цьому відіграє маршрутизація.
SPA (Single Page Application) — це вебзастосунок, у якому основна HTML-сторінка завантажується один раз. Надалі React змінює її вміст без повного перезавантаження документа.
Наприклад, застосунок може мати такі сторінки:
/ — головна;
/about — інформація про застосунок;
/contacts — контакти.
У звичайному багатосторінковому сайті перехід на /about зазвичай спричиняє новий запит до сервера та завантаження всієї сторінки.
У SPA перехід відбувається інакше:
Користувач натискає посилання.
Маршрутизатор визначає нову адресу.
React знаходить компонент, який відповідає цій адресі.
React оновлює потрібну частину інтерфейсу.
Браузер не перезавантажує всю сторінку.
Маршрутизація — це зіставлення URL-адрес із компонентами React.
Наприклад:
URL / відповідає компоненту Home;
URL /about відповідає компоненту About;
URL /contacts відповідає компоненту
ContactsМаршрутизація допомагає SPA виглядати як звичайний сайт із кількома сторінками, хоча фактично це один React-застосунок.
У React для маршрутизації часто використовують бібліотеку react-router-dom.
У вже створеному React-проєкті встановіть пакет:
npm install react-router-domПісля цього можна використовувати компоненти маршрутизатора.
Розглянемо простий застосунок із трьома сторінками.
// src/App.jsx
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
function Home() {
return (
<section>
<h1>Головна сторінка</h1>
<p>Вітаємо в нашому SPA.</p>
</section>
);
}
function About() {
return (
<section>
<h1>Про застосунок</h1>
<p>Ця сторінка відповідає маршруту /about.</p>
</section>
);
}
function Contacts() {
return (
<section>
<h1>Контакти</h1>
<p>Ця сторінка відповідає маршруту /contacts.</p>
</section>
);
}
function NotFound() {
return (
<section>
<h1>Сторінку не знайдено</h1>
<p>Перевірте адресу.</p>
</section>
);
}
export default function App() {
return (
<BrowserRouter>
<header>
<nav>
<Link to="/">Головна</Link>{" "}
<Link to="/about">Про нас</Link>{" "}
<Link to="/contacts">Контакти</Link>
</nav>
</header>
<main>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contacts" element={<Contacts />} />
<Route path="*" element={<NotFound />} />
</Routes>
</main>
</BrowserRouter>
);
}Якщо цей компонент підключений у стандартному файлі запуску React-застосунку, наприклад:
// src/main.jsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
createRoot(document.getElementById("root")).render(
<StrictMode>
<App />
</StrictMode>
);то застосунок матиме такі маршрути:
| Адреса | Компонент | |---|---| | / | Home | | /about | About | | /contacts | Contacts | | будь-яка інша адреса | NotFound |
BrowserRouterBrowserRouter вмикає маршрутизацію для всього компонента, який знаходиться всередині нього.
У прикладі:
<BrowserRouter>
{/* компоненти, які використовують маршрутизацію */}
</BrowserRouter>Завдяки цьому React Router може:
читати поточну адресу браузера;
реагувати на навігацію;
показувати потрібний компонент;
оновлювати URL без повного перезавантаження сторінки.
Зазвичай BrowserRouter розміщують біля кореня застосунку, щоб маршрутизація була доступна всім потрібним компонентам.
Routes і RouteКомпонент Routes містить набір маршрутів:
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>Кожен Route має два важливі атрибути:
path — адреса маршруту;
element — компонент, який потрібно відобразити.
Якщо поточна адреса браузера — /about, React Router відобразить:
<About />Маршрут із path="*" відповідає будь-якій адресі, для якої немає окремого маршруту:
<Route path="*" element={<NotFound />} />Це зручно для сторінки помилки «Сторінку не знайдено».
LinkДля переходів між маршрутами використовується компонент Link:
<Link to="/about">Про нас</Link>Атрибут to містить адресу, на яку потрібно перейти.
Link схожий на звичайний HTML-елемент a, але пристосований для SPA:
<Link to="/contacts">Контакти</Link>Після натискання:
URL зміниться на /contacts;
React Router вибере маршрут /contacts;
буде показано компонент Contacts;
повного перезавантаження сторінки не відбудеться.
Link і звичайний aЗвичайне HTML-посилання має такий вигляд:
<a href="/about">Про нас</a>Для внутрішніх переходів у SPA зазвичай використовують Link:
<Link to="/about">Про нас</Link>Основна різниця:
a може спричинити повне завантаження сторінки;
Link передає навігацію React Router, тому сторінка не перезавантажується повністю.
Для переходів між сторінками саме цього React-застосунку використовуйте Link.
Припустімо, користувач перебуває на / і натискає «Про нас».
Послідовність подій така:
Link повідомляє React Router про навігацію.
Адреса в браузері змінюється на /about.
React Router порівнює адресу з описаними маршрутами.
Знаходиться маршрут:
<Route path="/about" element={<About />} />Компонент Home замінюється компонентом About.
Документ HTML не завантажується повторно.
Саме тому переходи в SPA зазвичай відчуваються швидшими та плавнішими.
URL є частиною стану SPA. Він повідомляє застосунку, який маршрут зараз активний.
Наприклад:
/aboutозначає, що потрібно показати сторінку «Про застосунок».
Це має кілька переваг:
сторінку можна додати в закладки;
URL можна скопіювати та надіслати іншій людині;
кнопки «Назад» і «Вперед» у браузері продовжують працювати;
після оновлення сторінки браузер зберігає адресу маршруту.
Під час навігації через Link React Router працює без повного перезавантаження. Але якщо користувач безпосередньо відкриє адресу:
/aboutабо оновить сторінку на цій адресі, запит спочатку отримає сервер.
Сервер має повернути основний HTML-файл React-застосунку для таких маршрутів. Потім React Router прочитає поточний URL і покаже правильний компонент.
У навчальному середовищі або під час запуску через Vite це зазвичай уже налаштовано. Під час розгортання застосунку потрібно переконатися, що сервер підтримує повернення основного HTML-файлу для невідомих внутрішніх маршрутів.
a для внутрішньої навігації<a href="/about">Про нас</a>Таке посилання може перезавантажити весь документ.
Для внутрішнього маршруту краще написати:
<Link to="/about">Про нас</Link>Link поза BrowserRouterLink, Routes і Route повинні бути всередині маршрутизатора:
<BrowserRouter>
<Link to="/about">Про нас</Link>
</BrowserRouter>Якщо використати Link поза BrowserRouter, React Router не матиме доступу до контексту маршрутизації.
Якщо не додати маршрут із path="*", для невідомої адреси може не відображатися зрозумілий інтерфейс помилки.
Додайте окремий маршрут:
<Route path="*" element={<NotFound />} />toЗначення to має відповідати значенню path:
<Link to="/about">Про нас</Link>
<Route path="/about" element={<About />} />Якщо в одному місці написати /about, а в іншому /about-us, ці елементи не будуть відповідати один одному.
SPA завантажує основний документ один раз і змінює вміст за допомогою React.
Маршрутизація зіставляє URL-адреси з компонентами.
BrowserRouter підключає маршрутизацію до застосунку.
Routes містить набір маршрутів.
Route описує адресу та компонент для неї.
Link дає змогу переходити між внутрішніми сторінками без повного перезавантаження.
Маршрут path="*" можна використати для сторінки «Сторінку не знайдено».
URL допомагає зберігати поточний маршрут, використовувати закладки та кнопки навігації браузера.