Чому при роутингу сторінка не перезавантажується?

ReactJunior~2 хв читання

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

При роутингу в 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>

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

викликає preventDefault() - скасовує стандартну поведінку браузера (перезавантаження сторінки);
змінює URL через history.pushState() (частина HTML5 History API);
сповіщає React Router, що шлях змінився;
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 />, а браузер не робить запит на сервер.

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

Швидкість - миттєві переходи без перезавантаження.
Збереження стану (наприклад, фільтри, авторизація).
Гнучкість - можна керувати навігацією з коду (useNavigate).
Композиція компонентів - легко робити 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 із сервера.

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

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.