Why Use MemoryRouter in React

This article explores why developers should use MemoryRouter in React applications. Unlike standard routers that interact directly with the browser’s address bar, MemoryRouter stores its navigation history entirely in memory. Below, we examine the primary scenarios where this router is essential, including unit testing components, developing for non-browser environments, and embedding isolated widgets.

What is MemoryRouter?

In React Router, MemoryRouter is a router implementation that keeps the history of your URL in memory rather than reading or writing to the browser’s address bar. It is ideal for scenarios where you need to simulate routing but do not have a traditional web browser environment, or when you want to prevent the application’s routing from affecting the browser’s URL.

1. Unit Testing React Components

The most common use case for MemoryRouter is testing. When writing unit and integration tests with libraries like Jest and React Testing Library, you often need to test components that rely on routing context (like <Link> or useNavigate).

Since testing environments run in Node.js (via JSDOM) rather than a real browser, utilizing BrowserRouter can cause errors. MemoryRouter allows you to wrap your components and mock specific routes easily:

import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import MyComponent from './MyComponent';

test('renders the correct component on a specific route', () => {
  render(
    <MemoryRouter initialEntries={['/profile/123']}>
      <MyComponent />
    </MemoryRouter>
  );
  expect(screen.getByText(/Profile of user 123/i)).toBeInTheDocument();
});

Using the initialEntries prop, you can boot your component at any URL state to verify its behavior under different routing conditions.

2. Non-Browser Environments

If you are building applications for platforms that do not have a traditional browser address bar, BrowserRouter will not work. MemoryRouter is the go-to routing solution for:

• React Native: Mobile devices do not have a URL bar, making in-memory history tracking necessary.
• Electron or NW.js: Desktop applications often run in isolated shells where displaying or changing the URL is unnecessary or visually disruptive.
• React 360 / VR: Virtual reality applications lack standard web navigation inputs.

3. Embedded Widgets and Micro-Frontends

When building a widget, a third-party script, or a micro-frontend designed to be embedded inside another website, you must avoid interfering with the host website’s URL.

If your embedded React app uses BrowserRouter, it will attempt to overwrite the host application’s address bar, breaking the parent site’s navigation. Using MemoryRouter ensures your widget has fully functional internal navigation while leaving the parent website’s URL completely untouched.

4. UI Component Playgrounds (Storybook)

When showcasing components in Storybook or Styleguidist, components that use React Router hooks will crash without a router parent. Wrapping your stories in MemoryRouter provides the necessary context in an isolated environment, allowing developers to interact with links and navigation menus without reloading the Storybook page.