React Router має три режими, і кожен наступний додає можливості поверх попереднього.
1. Декларативний - маршрути описано в JSX, лише зіставлення URL з компонентами й навігація:
import { BrowserRouter, Routes, Route, Link } from 'react-router';
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/posts/:id" element={<Post />} />
</Routes>
</BrowserRouter>
Хуки useParams, useNavigate, useLocation, компонент <Link>. Дані завантажує сам компонент.
2. Режим даних - маршрути описано об'єктами поза рендером, і до них додаються завантажувачі даних і дії:
const router = createBrowserRouter([
{ path: '/posts/:id', Component: Post, loader: ({ params }) => getPost(params.id) },
]);
<RouterProvider router={router} />
Дані завантажуються до рендеру сторінки, паралельно для вкладених маршрутів, - без «водоспаду» запитів у useEffect. Дії (action) обробляють форми, після чого дані сторінки перевантажуються автоматично.
3. Фреймворковий - режим даних плюс плагін Vite: типобезпечні модулі маршрутів, автоматичне розділення коду, SSR, статичний рендер чи SPA на вибір. По суті це наступник Remix.
Як обирати: документація радить фреймворковий режим тим, хто не має сильної думки, - він дає найбільше. Декларативний - для простих застосунків або поступового переходу; режим даних - коли потрібні завантажувачі, але власна збірка.
React Router 8 (червень 2026) - перший реліз за щорічним графіком мажорних версій:
- пакет
react-router-domвидалено - усі імпорти зreact-router(іreact-router/dom); - мінімальні версії: React 19.2.7+, Node 22.22+, Vite 7+; пакети тепер лише ESM;
- поведінка прапорців
future.v8_*стала типовою: middleware маршрутів увімкнено завжди, модулі маршрутів розділяються на частини за замовчуванням; - у
meta-функціях замість застарілогоdata-loaderData.
Якщо у v7 всі прапорці майбутньої версії вже були увімкнені, перехід на v8 мінімальний.
З Laravel React Router доречний в окремій SPA. В Inertia маршрутизація належить Laravel, і React Router не потрібен.