Skip to main content
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...
});

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

Build docs developers (and LLMs) love

Get started for freeTalk to us