Що робить MemoryRouter?

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

Що таке `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);
коли потрібно ізолювати поведінку навігації;
коли важливо контролювати початкові маршрути й переходи вручну.

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

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

Premium

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