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

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

Допрацюйте відповідь до «Що робить бібліотека react-router-dom?». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

## Що робить бібліотека `react-router`

`react-router` - це бібліотека, яка дозволяє реалізувати **навігацію (роутинг)** всередині **SPA (Single Page Application)** на React.

Вона відповідає за те, щоб:

1. стежити за зміною URL в адресному рядку;
2. зіставляти URL з потрібним **компонентом**;
3. оновлювати інтерфейс **без перезавантаження сторінки**;
4. надавати інструменти для навігації, параметрів, вкладених маршрутів тощо.

---

## Простіше кажучи:

> `react-router` робить так, щоб залежно від URL (наприклад, `/`, `/about`, `/profile/42`)
> React показував потрібний компонент на сторінці - **без перезавантаження**.

---

## Основні компоненти і концепції `react-router`

### 1. `<BrowserRouter>`

Обгортає весь застосунок і "слухає" зміни адреси в браузері.
Використовує **HTML5 History API** (`pushState`, `replaceState`) для керування URL.

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

function App() {
  return (
    <BrowserRouter>
      <MyRoutes />
    </BrowserRouter>
  );
}
```

---

### 2. `<Routes>` **і** `<Route>`

Описують структуру маршрутів (що відображати за якого шляху).

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

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

При переході на `/about` React покаже компонент `<About />`.

---

### 3. **Навігація (**`<Link>` **і** `useNavigate`**)**

#### Через компонент `<Link>`:

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

→ Змінює URL і оновлює компонент **без перезавантаження сторінки**.

#### Програмно через `useNavigate()`:

```javascript
const navigate = useNavigate();
navigate("/profile");
```

---

### 4. **Параметри маршруту (**`useParams`**)**

Дозволяють створювати **динамічні маршрути**, наприклад `/users/:id`.

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

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

function User() {
  const { id } = useParams();
  return <h2>Профіль користувача №{id}</h2>;
}
```

---

### 5. **Query-параметри (**`useSearchParams`**)**

Робота з параметрами в URL, наприклад `?page=2`.

```javascript
const [searchParams, setSearchParams] = useSearchParams();
const page = searchParams.get("page");
```

---

### 6. **Вкладені маршрути (Nested routes)**

Дозволяють створювати маршрути зі спільною оболонкою (layout):

```javascript
<Route path="/dashboard" element={<DashboardLayout />}>
  <Route path="analytics" element={<Analytics />} />
  <Route path="settings" element={<Settings />} />
</Route>
```

---

### 7. **Route guards і Redirect**

Можна перенаправляти користувача, якщо він не авторизований:

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

<Route
  path="/profile"
  element={isAuth ? <Profile /> : <Navigate to="/login" />}
/>
```

---

## Основні можливості `react-router`

| Можливість | Опис |
|---|---|
| SPA-навігація | Перемикання сторінок без перезавантаження |
| Вкладені маршрути | Підтримка layouts і підсторінок |
| Динамічні параметри | `/users/:id`, `/posts/:slug` |
| Навігація з коду | `useNavigate()` |
| Query-параметри | `useSearchParams()` |
| Обробка 404 | `<Route path="*">` |
| Захищені маршрути | Редиректи на основі стану (авторизація) |

---

## Різновиди пакета

| Пакет | Де використовується |
|---|---|
| `react-router-dom` | У веб-застосунках (браузер) |
| `react-router-native` | У React Native |
| `react-router` | Базовий пакет, спільний для всіх платформ |

Зазвичай ти встановлюєш:

```javascript
npm install react-router-dom
```

---

## У двох словах:

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

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

Для рев’юера

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

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