Suggest an edit

Improve this article

Refine the answer for “What does MemoryRouter do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What `MemoryRouter` is

`MemoryRouter` is a router type from the `react-router-dom` library
that **does not use the browser's address bar, the History API, or a hash**.

It keeps the navigation history **in memory (in-memory)**, that is, **only inside the React application**.

---

## How it works

- Unlike `BrowserRouter`, `MemoryRouter` **has no connection to a real browser URL**.
- It **emulates navigation history** internally.
- When the "page" changes, it simply changes state inside React,
without touching the address bar or interacting with the server.

---

## Usage example

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

function App() {
  return (
    <MemoryRouter initialEntries={["/"]}>
      <nav>
        <Link to="/about">About us</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </MemoryRouter>
  );
}

function Home() {
  return <h2>Home page</h2>;
}

function About() {
  return <h2>About us</h2>;
}
```

When you navigate through `<Link to="/about">`,
React Router will change the "virtual" URL inside memory,
but **the browser's address bar will not change at all**.

---

## Where `MemoryRouter` is used

| Scenario | Why `MemoryRouter` fits |
|---|---|
| **Tests** (unit / integration) | You can isolate navigation without a browser |
| **Storybook** | Demonstrating components with routing without a real URL |
| **React Native** | No browser, only internal navigation |
| **Simulating navigation** in environments without a DOM | Works without `window` and `document` |

---

## Why `MemoryRouter` is useful in tests

Tests (for example, with **React Testing Library**) usually **don't have a real browser**.
They have no real URL or History API, so `BrowserRouter` simply won't work.

`MemoryRouter` solves this:

- it keeps the "route history" in JS memory;
- it lets you set the **starting route** (`initialEntries`);
- it lets you **verify transitions** inside a test;
- it does not require a real DOM or browser.

---

### Example test with React Testing Library

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

test("renders the 'About us' page for the /about route", () => {
  render(
    <MemoryRouter initialEntries={["/about"]}>
      <Routes>
        <Route path="/" element={<div>Home</div>} />
        <Route path="/about" element={<div>About us</div>} />
      </Routes>
    </MemoryRouter>
  );

expect(screen.getByText("About us")).toBeInTheDocument();
});
```

Here:

- `initialEntries={["/about"]}` mimics the URL `/about`;
- `MemoryRouter` creates a virtual navigation history;
- The test checks that React Router rendered the correct component.

---

### You can also simulate a transition

```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("navigation between pages works", async () => {
  render(
    <MemoryRouter initialEntries={["/"]}>
      <Routes>
        <Route path="/" element={<Link to="/about">About us</Link>} />
        <Route path="/about" element={<div>About us page</div>} />
      </Routes>
    </MemoryRouter>
  );

await userEvent.click(screen.getByText("About us"));
  expect(screen.getByText("About us page")).toBeInTheDocument();
});
```

When you click the link, React Router updates its internal state,
no real URL involved, but the logic is exactly the same as in the browser.

---

## Main `MemoryRouter` properties

| Property | Description |
|---|---|
| `initialEntries` | List of "virtual" URLs for the history (defaults to `['/']`) |
| `initialIndex` | Index of the active route in `initialEntries` |
| `basename` | Prefix for all paths |
| `children` | Nested routes |

Example with several routes:

```javascript
<MemoryRouter initialEntries={["/", "/about", "/profile"]} initialIndex={1}>
  {/* starting route → "/about" */}
</MemoryRouter>
```

---

## Summary:

> `MemoryRouter` is React Router's "virtual router",
> which keeps navigation history **in memory**,
> not in the browser's URL.

### It is useful:

- when there is **no real browser** (tests, Storybook, React Native);
- when you need to **isolate navigation behavior**;
- when it matters to **control the starting routes and transitions manually**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts607 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.