What does MemoryRouter do?

ReactJunior~2 min read

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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.