Пошук уроків, статей та іншого контенту
Опишете маршрути через Routes і Route та додасте переходи між сторінками за допомогою Link і NavLink.
Маршрутизація визначає, який компонент потрібно показати для певної URL-адреси.
Наприклад:
/ — головна сторінка;
/about — сторінка «Про нас»;
/contacts — сторінка контактів.
Для маршрутизації в React використаємо бібліотеку react-router-dom.
Встановіть її в проєкті:
npm install react-router-domBrowserRouterКомпонент BrowserRouter вмикає маршрутизацію для всього застосунку. Його зазвичай розміщують у файлі входу, наприклад
main.jsximport { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
);Тепер компоненти всередині App можуть використовувати Routes, Route, Link і NavLink.
Routes і RouteRoutes містить набір маршрутів, а кожен Route описує відповідність між URL та компонентом.
import { Routes, Route } from 'react-router-dom';
function HomePage() {
return <h1>Головна сторінка</h1>;
}
function AboutPage() {
return <h1>Про нас</h1>;
}
function App() {
return (
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
);
}
export default App;Основні властивості Route:
path — шлях у браузері;
element — JSX-елемент, який потрібно показати.
Коли URL відповідає значенню path, React Router відображає відповідний element.
Розглянемо повний приклад із трьома сторінками:
import { NavLink, Link, Route, Routes } from 'react-router-dom';
function HomePage() {
return (
<>
<h1>Головна</h1>
<p>Ласкаво просимо до нашого сайту.</p>
</>
);
}
function AboutPage() {
return (
<>
<h1>Про нас</h1>
<p>Ми створюємо сучасні вебзастосунки.</p>
</>
);
}
function ContactsPage() {
return (
<>
<h1>Контакти</h1>
<p>Email: hello@example.com</p>
</>
);
}
function NotFoundPage() {
return (
<>
<h1>Сторінку не знайдено</h1>
<Link to="/">Повернутися на головну</Link>
</>
);
}
function App() {
return (
<div>
<header>
<nav>
<NavLink to="/">Головна</NavLink>{' '}
<NavLink to="/about">Про нас</NavLink>{' '}
<NavLink to="/contacts">Контакти</NavLink>
</nav>
</header>
<main>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/contacts" element={<ContactsPage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</main>
</div>
);
}
export default App;Маршрут path="*" відповідає будь-якому URL, для якого немає окремого маршруту. Його часто використовують для сторінки помилки 404.
LinkДля переходів між маршрутами використовують компонент Link.
import { Link } from 'react-router-dom';
function HomePage() {
return (
<div>
<h1>Головна сторінка</h1>
<Link to="/about">Дізнатися більше про нас</Link>
</div>
);
}Властивість to містить адресу, на яку потрібно перейти:
<Link to="/">Головна</Link>
<Link to="/about">Про нас</Link>
<Link to="/contacts">Контакти</Link>Link не перезавантажує всю сторінку. React Router змінює URL і показує потрібний компонент без повного перезапуску застосунку.
Link відрізняється від звичайного посиланняЗвичайний HTML-елемент:
<a href="/about">Про нас</a>може спричинити повне перезавантаження сторінки.
Для переходів між сторінками React-застосунку використовуйте:
<Link to="/about">Про нас</Link>Звичайний a доречний для зовнішніх адрес:
<a href="https://example.com">Зовнішній сайт</a>NavLinkNavLink схожий на Link, але додатково визначає, чи є посилання активним.
Це зручно для навігаційного меню: активний пункт можна виділити стилем.
import { NavLink } from 'react-router-dom';
function Navigation() {
return (
<nav>
<NavLink to="/">Головна</NavLink>
<NavLink to="/about">Про нас</NavLink>
<NavLink to="/contacts">Контакти</NavLink>
</nav>
);
}Щоб додати різний клас для активного та неактивного посилання, передайте функцію у className:
import { NavLink } from 'react-router-dom';
function Navigation() {
return (
<nav>
<NavLink
to="/"
className={({ isActive }) => (isActive ? 'active' : '')}
>
Головна
</NavLink>
<NavLink
to="/about"
className={({ isActive }) => (isActive ? 'active' : '')}
>
Про нас
</NavLink>
</nav>
);
}
export default Navigation;Параметр isActive має значення:
true, якщо поточний URL відповідає маршруту;
false, якщо посилання неактивне.
Приклад стилів:
nav {
display: flex;
gap: 16px;
}
nav a {
color: #333;
text-decoration: none;
}
nav a.active {
color: #1565c0;
font-weight: bold;
}import { NavLink, Route, Routes } from 'react-router-dom';
function Navigation() {
return (
<nav>
<NavLink
to="/"
className={({ isActive }) => (isActive ? 'active' : '')}
>
Головна
</NavLink>
<NavLink
to="/about"
className={({ isActive }) => (isActive ? 'active' : '')}
>
Про нас
</NavLink>
<NavLink
to="/contacts"
className={({ isActive }) => (isActive ? 'active' : '')}
>
Контакти
</NavLink>
</nav>
);
}
function HomePage() {
return <h1>Головна сторінка</h1>;
}
function AboutPage() {
return <h1>Сторінка «Про нас»</h1>;
}
function ContactsPage() {
return <h1>Сторінка контактів</h1>;
}
function NotFoundPage() {
return <h1>404 — Сторінку не знайдено</h1>;
}
function App() {
return (
<>
<Navigation />
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/contacts" element={<ContactsPage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</>
);
}
export default App;У цьому прикладі:
BrowserRouter надає застосунку можливість працювати з маршрутами.
NavLink створює навігаційне меню.
Routes містить усі маршрути.
Route показує потрібну сторінку для кожного шляху.
Маршрут * показує сторінку 404 для невідомої адреси.
Routes без BrowserRouterКомпоненти маршрутизації повинні бути всередині BrowserRouter.
Неправильно:
function App() {
return (
<Routes>
<Route path="/" element={<HomePage />} />
</Routes>
);
}Правильно:
<BrowserRouter>
<App />
</BrowserRouter>href для внутрішніх переходівНеправильно:
<a href="/about">Про нас</a>Правильно:
<Link to="/about">Про нас</Link>RouteУ сучасному React Router компонент потрібно передавати через element:
<Route path="/about" element={<AboutPage />} />Не слід використовувати старий синтаксис із властивістю component:
<Route path="/about" component={AboutPage} />/Маршрут має починатися з /, якщо це окремий шлях:
<Route path="/contacts" element={<ContactsPage />} />NavLink за межі маршрутизатораNavLink і Link також повинні знаходитися всередині BrowserRouter. Інакше React Router не матиме доступу до інформації про поточний URL.
BrowserRouter підключає маршрутизацію в застосунку.
Routes містить набір маршрутів.
Route пов’язує URL із компонентом.
Link створює перехід між сторінками без повного перезавантаження.
NavLink працює як Link, але дозволяє визначити активний пункт меню.
Для невідомих адрес можна створити маршрут із path="*".
Для внутрішніх переходів React-застосунку використовуйте Link або NavLink, а не звичайний a.