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

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

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

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

Контент

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

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

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

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

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

Роутинг - це система, яка "зіставляє" адресу (наприклад, `/profile` або `/dashboard/settings`) з компонентом, який потрібно відрендерити на екрані.

---

### Приклад без роутингу:

Якби роутингу не було, при переході на іншу сторінку довелося б **перезавантажувати всю сторінку** з сервера.
З роутингом у React перехід відбувається **на стороні клієнта (client-side routing)** - швидко і без втрати стану застосунку.

---

### Як це працює:

React сам по собі не містить вбудованого роутера, тому найчастіше використовується бібліотека **React Router**.

Приклад з `react-router-dom`:

```javascript
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Profile from "./pages/Profile";

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

export default App;
```

Тут:

- `<BrowserRouter>` - обгортає весь застосунок і стежить за змінами URL.
- `<Routes>` - контейнер для списку маршрутів.
- `<Route path="/about" element={<About />}/>` - вказує: якщо URL `/about`, потрібно показати компонент `About`.

---

### Переваги клієнтського роутингу:

1. Швидше - немає повного перезавантаження сторінки.
2. Зберігається стан застосунку.
3. Можна легко керувати переходами і навігацією всередині SPA (Single Page Application).
4. Зручно реалізовувати **динамічні маршрути**, наприклад `/users/:id`.

---

### Приклад динамічного маршруту:

```javascript
<Route path="/users/:id" element={<UserPage />} />
```

Компонент `UserPage` зможе отримати параметр `id` з URL:

```javascript
import { useParams } from "react-router-dom";

function UserPage() {
  const { id } = useParams();
  return <h1>User profile #{id}</h1>;
}
```

---

### Види роутингу:

| Тип роутингу | Опис |
|---|---|
| **Client-side routing** | Керується в браузері, без перезавантаження сторінки. Основний варіант у React. |
| **Server-side routing** | Кожен запит до нового URL викликає перезавантаження і завантаження нової HTML-сторінки з сервера. |
| **Static / pre-rendered routing (Next.js)** | Поєднує клієнтський і серверний рендеринг, дозволяючи SEO і швидку навігацію. |

---

### Основні хуки з `react-router-dom`:

- `useNavigate()` - перехід між сторінками програмно.
- `useParams()` - отримати параметри маршруту.
- `useLocation()` - отримати поточний шлях і query-параметри.
- `useSearchParams()` - керувати параметрами запиту (`?page=2` тощо).

---

### Приклад програмної навігації:

```javascript
import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

const handleLogin = () => {
    // авторизація ...
    navigate("/dashboard");
  };

return <button onClick={handleLogin}>Log in</button>;
}
```

---

### Підсумок:

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

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

Для рев’юера

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

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