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

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

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

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

Контент

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

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

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

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

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

## Що таке `MemoryRouter`

`MemoryRouter` - це тип роутера з бібліотеки `react-router-dom`,
який **не використовує ні адресний рядок браузера, ні History API, ні хеш**.

Він зберігає історію навігації **в оперативній пам'яті (in-memory)**, тобто **лише всередині React-застосунку**.

---

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

- На відміну від `BrowserRouter`, у `MemoryRouter` **немає прив'язки до реального URL браузера**.
- Він **емулює історію навігації** всередині себе.
- При зміні "сторінки" він просто змінює стан всередині React,
не торкаючись адресного рядка і не взаємодіючи з сервером.

---

## Приклад використання

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

function App() {
  return (
    <MemoryRouter initialEntries={["/"]}>
      <nav>
        <Link to="/about">Про нас</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </MemoryRouter>
  );
}

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

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

При переході за посиланням `<Link to="/about">`,
React Router змінить "віртуальний" URL всередині пам'яті,
але **в адресному рядку браузера нічого не зміниться**.

---

## Де використовується `MemoryRouter`

| Сценарій | Чому підходить `MemoryRouter` |
|---|---|
| **Тести** (unit / integration) | Можна ізолювати навігацію без браузера |
| **Storybook** | Демонстрація компонентів з роутингом без реального URL |
| **React Native** | Немає браузера - лише внутрішня навігація |
| **Симуляція навігації** в середовищах без DOM | Працює без `window` і `document` |

---

## Чому `MemoryRouter` корисний у тестах

Тести (наприклад, з **React Testing Library**) зазвичай **не мають справжнього браузера**.
У них немає справжнього URL і History API, тому `BrowserRouter` просто не спрацює.

`MemoryRouter` вирішує це:

- зберігає "історію маршрутів" у JS-пам'яті;
- дозволяє задати **початковий маршрут** (`initialEntries`);
- дозволяє **перевіряти переходи** всередині тесту;
- не потребує реального DOM чи браузера.

---

### Приклад тесту з React Testing Library

```javascript
import { render, screen } from "@testing-library/react";
import { MemoryRouter, Routes, Route } from "react-router-dom";
import App from "./App";

test("рендерить сторінку 'Про нас' при маршруті /about", () => {
  render(
    <MemoryRouter initialEntries={["/about"]}>
      <Routes>
        <Route path="/" element={<div>Головна</div>} />
        <Route path="/about" element={<div>Про нас</div>} />
      </Routes>
    </MemoryRouter>
  );

expect(screen.getByText("Про нас")).toBeInTheDocument();
});
```

Тут:

- `initialEntries={["/about"]}` - імітує URL `/about`;
- `MemoryRouter` створює віртуальну історію переходів;
- Тест перевіряє, що React Router відмалював правильний компонент.

---

### Можна також симулювати перехід

```javascript
import { render, screen } from "@testing-library/react";
import { MemoryRouter, Routes, Route, Link } from "react-router-dom";
import userEvent from "@testing-library/user-event";

test("навігація між сторінками працює", async () => {
  render(
    <MemoryRouter initialEntries={["/"]}>
      <Routes>
        <Route path="/" element={<Link to="/about">Про нас</Link>} />
        <Route path="/about" element={<div>Сторінка Про нас</div>} />
      </Routes>
    </MemoryRouter>
  );

await userEvent.click(screen.getByText("Про нас"));
  expect(screen.getByText("Сторінка Про нас")).toBeInTheDocument();
});
```

При кліку на посилання React Router оновить внутрішній стан -
жодного реального URL, але логіка повністю така сама, як у браузері.

---

## Основні властивості `MemoryRouter`

| Властивість | Опис |
|---|---|
| `initialEntries` | Список "віртуальних" URL для історії (за замовчуванням `['/']`) |
| `initialIndex` | Індекс активного маршруту в `initialEntries` |
| `basename` | Префікс для всіх шляхів |
| `children` | Вкладені маршрути |

Приклад з кількома маршрутами:

```javascript
<MemoryRouter initialEntries={["/", "/about", "/profile"]} initialIndex={1}>
  {/* початковий маршрут → "/about" */}
</MemoryRouter>
```

---

## Підсумок:

> `MemoryRouter` - це "віртуальний роутер" React Router,
> який зберігає історію навігації **в пам'яті**,
> а не в URL браузера.

### Він корисний:

- коли **немає реального браузера** (тести, Storybook, React Native);
- коли потрібно **ізолювати поведінку навігації**;
- коли важливо **контролювати початкові маршрути й переходи вручну**.

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

Для рев’юера

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

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