Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Чому при роутингу сторінка не перезавантажується?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Коротка відповідь:

> При роутингу в React сторінка не перезавантажується,
> тому що бібліотека `react-router` (чи інший клієнтський роутер)
> **перехоплює переходи за посиланнями і зміни URL**
> і сама оновлює потрібні **React-компоненти**,
> **не надсилаючи новий HTTP-запит на сервер**.

---

## Детальніше: що робить React Router

Зазвичай у браузері:

- при кліку на посилання `<a href="/about">`
-> браузер **надсилає запит на сервер** `/about`;
-> сервер повертає новий HTML-файл;
-> сторінка **повністю перезавантажується**.

---

### Але в React все інакше:

React-застосунок - це **SPA (Single Page Application)**:
один HTML-файл (`index.html`), у якому React **динамічно змінює вміст**.

Коли ти використовуєш `<Link>` з `react-router-dom`:

```javascript
<Link to="/about">Про нас</Link>
```

то цей компонент:

1. **викликає** `preventDefault()` - скасовує стандартну поведінку браузера (перезавантаження сторінки);
2. **змінює URL** через `history.pushState()` (частина HTML5 History API);
3. **сповіщає React Router**, що шлях змінився;
4. **React Router перемальовує потрібний компонент** (наприклад `<About />`) - без запиту до сервера.

---

## Візуально:

| Дія | Звичайний сайт (серверний роутинг) | React SPA (клієнтський роутинг) |
|---|---|---|
| Клік по посиланню | Браузер робить новий запит на сервер | React Router змінює URL і рендерить новий компонент |
| HTML | Сервер надсилає новий HTML-файл | HTML залишається той самий (`index.html`) |
| JS | Завантажується заново | JS уже завантажений, React просто оновлює Virtual DOM |
| Час відгуку | Повільніше (очікування відповіді сервера) | Майже миттєво |
| Стан (state) | Втрачається при перезавантаженні | Зберігається в пам'яті React |

---

## Технічно за це відповідає:

### HTML5 **History API**

React Router використовує:

- `window.history.pushState()` - щоб змінити URL без перезавантаження,
- `window.onpopstate` - щоб реагувати на натискання кнопок "Назад"/"Вперед".

---

## Приклад "магії" в дії

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Головна</Link>
        <Link to="/about">Про нас</Link>
      </nav>

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

function Home() {
  return <h1>Головна сторінка</h1>;
}

function About() {
  return <h1>Про нас</h1>;
}
```

При кліку на "Про нас" URL змінюється на `/about`,
але React просто рендерить `<About />`,
а **браузер не робить запит на сервер**.

---

## Чому це зручно

1. **Швидкість** - миттєві переходи без перезавантаження.
2. **Збереження стану** (наприклад, фільтри, авторизація).
3. **Гнучкість** - можна керувати навігацією з коду (`useNavigate`).
4. **Композиція компонентів** - легко робити layouts, nested routes тощо.

---

## Коли сторінка все ж перезавантажується

Сторінка **перезавантажиться**, якщо:

- ти використовуєш **звичайний** `<a href>`, а не `<Link>`,
- або вручну викликав `window.location.href = '/about'`,
- або сервер неправильно налаштований (немає SPA fallback'у і він відповідає 404 на `/about`).

Щоб це працювало коректно, сервер повинен завжди віддавати:

```javascript
index.html
```

для **будь-якого маршруту** (а не шукати `about.html` тощо).

---

## Підсумок:

> Сторінка не перезавантажується,
> тому що **React Router перехоплює кліки і зміни URL,**
> **змінює адресу через History API**
> і **відмальовує потрібний компонент прямо в браузері,**
> не запитуючи новий HTML із сервера.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати488 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.