Codica - корисне про IT

Як організувати роутинг у React-застосунку? 📌 Очікувана відповідь: Найпопулярніше рішення — використовувати бібліотеку React Router. Вона дозволяє створювати SPA (Single Page Application) з навігацією без перезавантаження сторінки. 📌 Базовий приклад:

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

📌 Як працює React Router: 1️⃣ Використовує Browser History API

pushState, replaceState

2️⃣ Відстежує зміну URL у браузері. 3️⃣ Порівнює URL із Route. 4️⃣ Якщо шлях збігається — рендерить відповідний компонент. 📌 Що відбувається при переході через Link:

<Link to="/about">About</Link>

React Router: • не перезавантажує сторінку; • змінює URL через History API; • React перерендерює компонент, який відповідає маршруту. 📌 Основні компоненти React Router:

BrowserRouter

— обгортає застосунок;

Routes

— контейнер для маршрутів;

Route

— опис конкретного маршруту;

Link

— навігація без перезавантаження сторінки. 🍀 Пам’ятай: відповідай впевнено, коротко і по суті. Вчіть не відповіді. Вчіть логіку. Удачі! TikTok | Instagram | Telegram