Декларативну маршрутизацію

Замість імперативного window.location.href = "/about" описуєте відображення URL на компоненти через JSX:

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/about" element={<AboutPage />} />
</Routes>

Вкладені маршрути

Ієрархічна структура маршрутів із спільними Layout-компонентами:

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

Динамічні параметри

Один маршрут для тисяч сторінок:

<Route path="/users/:userId" element={<UserProfile />} />

Інтеграція з History API

Підтримка кнопок "Назад" та "Вперед" браузера, збереження стану навігації, програмні переходи.

01. Встановлення та базова конфігурація

• Встановлення React Router v7 через npm install react-router.
• Обгортання застосунку у <BrowserRouter>.
• Визначення перших маршрутів через <Routes> та <Route>.
• Навігація через компонент <Link>.
• Альтернатива: HashRouter для статичного хостингу.

02. Вкладені маршрути та Outlet

• Організація ієрархічної структури маршрутів.
• Використання <Outlet> для рендерингу дочірніх компонентів.
• Layout Routes для спільних обгорток без впливу на URL.
• Index Routes як сторінки за замовчуванням.
• Багаторівнева вкладеність для складних застосунків.

03. Динамічні маршрути та параметри

• Створення динамічних сегментів через синтаксис :paramName.
• Витягування значень параметрів через useParams().
• Типізація параметрів у TypeScript.
• Необов'язкові сегменти через суфікс ?.
• Wildcard-маршрути через * для вкладених шляхів.

04. Навігація та корисні хуки

• Програмна навігація через useNavigate.
• Активні посилання через <NavLink> із класом .active.
• Робота з пошуковими параметрами через useSearchParams.
• Відстеження локації через useLocation.
• Передача стану через navigate(path, { state }).

05. Обробка помилок та 404

• Створення сторінок 404 через catch-all маршрут path="*".
• Вкладені 404 для контекстних повідомлень.
• Обробка помилок рендерингу через ErrorBoundary.
• Локальні ErrorBoundary для ізоляції помилок.
• Інтеграція логування помилок із Sentry / LogRocket.

06. Data Router API: альтернативний синтаксис

• Створення маршрутів через createBrowserRouter та масив об'єктів.
• Порівняння JSX-синтаксису та Data Router API.
• Вбудована обробка помилок через errorElement.
• Централізована конфігурація для великих проєктів.
• Типізація маршрутів через TypeScript.
• Переваги для data fetching (loaders, actions).

Декларативне відображення URL на компоненти

React Router не використовує імперативні виклики (router.navigate()). Замість цього визначаєте дерево маршрутів декларативно через JSX, а React Router автоматично обирає відповідний компонент на основі поточного URL.

Односпрямований потік даних

URL → Маршрут → Компонент → UI. Зміна URL викликає ререндер відповідних компонентів, але компоненти не змінюють URL напряму — вони використовують <Link> або useNavigate() для делегування навігації React Router.

Композиція через вкладеність

Складні макети будуються через вкладені маршрути замість ручного рендерингу умовних компонентів. Кожен рівень вкладеності додає свій сегмент до URL та свій Layout до UI.

Типобезпека через TypeScript

Всі хуки React Router підтримують дженерики для типізації параметрів, стану локації та пошукових параметрів. Це забезпечує автодоповнення та перевірку типів на етапі компіляції.