How to Debug MemoryRouter in React

Debugging MemoryRouter in React can be challenging because it stores its navigation history in memory rather than syncing it with the browser’s address bar. This article provides a straightforward guide on how to inspect, track, and debug the internal state of a MemoryRouter using custom logger components, React Developer Tools, and unit testing strategies.

Why MemoryRouter is Challenging to Debug

Unlike BrowserRouter, which updates the browser’s URL as you navigate, MemoryRouter keeps the URL state entirely in memory. This is ideal for testing environments (like Jest or Vitest) and non-browser platforms (like React Native), but it means you cannot look at the browser’s address bar to see your current route or history stack.

Method 1: Use a Location Spy Component

The simplest way to debug MemoryRouter in a browser or test environment is to create a small helper component that hooks into the router’s lifecycle and logs changes to the console.

Since hooks like useLocation must be used inside a router context, you place this spy component inside your MemoryRouter.

import React, { useEffect } from 'react';
import { MemoryRouter, useLocation } from 'react-router-dom';

// The debug component
function LocationDebugger() {
  const location = useLocation();

  useEffect(() => {
    console.log('Current Route Info:', {
      pathname: location.pathname,
      search: location.search,
      hash: location.hash,
      state: location.state,
    });
  }, [location]);

  return null; // This component doesn't render any UI
}

// How to use it in your app or test
export default function App() {
  return (
    <MemoryRouter initialEntries={['/home']}>
      <LocationDebugger />
      {/* Your routes and components go here */}
    </MemoryRouter>
  );
}

Every time the route changes, the debugger component will print the exact location object to your console.

Method 2: Inspect via React Developer Tools

If you are debugging in a browser, you can use the React Developer Tools extension to inspect the internal state of the MemoryRouter.

1. Open your browser’s Developer Tools and navigate to the Components tab.
2. Search for MemoryRouter or Router in the component tree.
3. Select the component.
4. Look at the Props and Hooks sections in the right-hand panel. You will see the location hook state, as well as the history object which contains the navigation stack (entries) and the current index.

Method 3: Debugging in Unit Tests

MemoryRouter is most commonly used in testing libraries like React Testing Library. To debug the router during tests, you can programmatically assert the current route.

You can render a helper component inside your test setup to capture the location object, or use screen to search for elements specific to certain routes.

import { render, screen } from '@testing-library/react';
import { MemoryRouter, Routes, Route, useLocation } from 'react-router-dom';

function LocationDisplay() {
  const location = useLocation();
  return <div data-testid="location-display">{location.pathname}</div>;
}

test('navigates to correct route', () => {
  render(
    <MemoryRouter initialEntries={['/profile']}>
      <Routes>
        <Route path="/profile" element={<div>Profile Page</div>} />
      </Routes>
      <LocationDisplay />
    </MemoryRouter>
  );

  // Assert that the pathname is correct
  expect(screen.getByTestId('location-display')).toHaveTextContent('/profile');
});

By rendering the current path inside a hidden or test-only element, your test suite can easily verify that navigation actions are directing users to the correct location.