MemoryRouter

A declarative Router that stores all entries in memory. Useful for non-browser environments without a DOM API (like testing or React Native).

import { MemoryRouter, Routes, Route } from "react-router";

function App() {
  return (
    <MemoryRouter initialEntries={["/", "/about"]} initialIndex={1}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </MemoryRouter>
  );
}

Type Declaration

export interface MemoryRouterProps {
  basename?: string;
  children?: React.ReactNode;
  initialEntries?: InitialEntry[];
  initialIndex?: number;
  unstable_useTransitions?: boolean;
}

export function MemoryRouter({
  basename,
  children,
  initialEntries,
  initialIndex,
  unstable_useTransitions,
}: MemoryRouterProps): React.ReactElement;

type InitialEntry = string | Partial<Location>;

Props

basename · string

Application basename for when you can’t deploy to the root of the domain, but a subdirectory.

<MemoryRouter basename="/app">
  <Routes>
    <Route path="/" /> {/* Matches /app/ */}
    <Route path="dashboard" /> {/* Matches /app/dashboard */}
  </Routes>
</MemoryRouter>

children · React.ReactNode

Route components describing your route configuration. Typically contains a <Routes> component with nested <Route> elements.

initialEntries · InitialEntry[]

Initial entries in the in-memory history stack. Each entry can be a string (pathname) or a partial Location object.

<MemoryRouter
  initialEntries={[
    "/",
    "/about",
    { pathname: "/users", search: "?sort=name", state: { from: "/" } },
  ]}
>
  <Routes>{/* ... */}</Routes>
</MemoryRouter>

initialIndex · number

Index of initialEntries the application should initialize to. Defaults to the last entry.

<MemoryRouter
  initialEntries={["/", "/about", "/contact"]}
  initialIndex={1} // Start at "/about"
>
  <Routes>{/* ... */}</Routes>
</MemoryRouter>

unstable_useTransitions · boolean

Control whether router state updates are internally wrapped in React.startTransition.

• When left undefined, all router state updates are wrapped in React.startTransition
• When set to true, Link and Form navigations will be wrapped in React.startTransition and all router state updates are wrapped in React.startTransition
• When set to false, the router will not leverage React.startTransition on any navigations or state changes.

Example

Testing

import { render } from "@testing-library/react";
import { MemoryRouter } from "react-router";

test("renders about page", () => {
  render(
    <MemoryRouter initialEntries={["/about"]}>
      <App />
    </MemoryRouter>
  );
  // assertions...
});

Navigating Between Entries

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

function App() {
  return (
    <MemoryRouter initialEntries={["/", "/about"]} initialIndex={0}>
      <nav>
        <Link to="/">Home</Link>
        <Link to="about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </MemoryRouter>
  );
}

Use Cases

• Testing: Useful for testing components that use routing without a browser
• React Native: For apps that don’t have a browser history stack
• Server-side rendering: For controlling the initial location on the server
• Embedding: When you need multiple isolated routing contexts in a single app