code-forge-io/react-router-devtools

Debug your apps, find hydration errors, trace your network and more in your react-router app with these devtools

Summary

react-router-devtools is a Vite plugin that adds an in-browser panel to React Router v7+ applications for inspecting page state, loaders, and routes. It surfaces hydration errors, traces network requests, and shows a tree view of the app's routes, giving engineers a focused view of routing-specific behavior that generic browser devtools do not cover.

What it is useful for

When a React Router v7+ app misbehaves, generic browser devtools force you to dig through component trees and the network log to piece together what routing-related code is doing. This package concentrates router diagnostics into one panel with tabs labeled Active Page, Terminal, Settings, Errors, Network, and Routes, plus a side Timeline tab.

Concretely, engineers can:

• Inspect the current page, URL parameters, and loader data from the Active Page and Terminal tabs.
• Track hydration issues from the Errors tab, which the README highlights as a key use case for "finding hydration errors."
• Watch network requests in real time via the Network tab, including aborted and cached calls, which is useful when loaders or actions fire unexpectedly.
• View registered routes as a tree/list from the Routes tab, helpful when a route is not matching or nesting is unclear.

The project is a renamed continuation of the older remix-development-tools. The README notes the legacy branch is preserved for users still on Remix.

How engineers can use it

The README documents a two-step setup for React Router v7+ with Vite. Install the package as a dev dependency, then register the plugin in vite.config.js:

npm install react-router-devtools -D

import { reactRouterDevTools } from "react-router-devtools";

export default defineConfig({
  plugins: [reactRouterDevTools(), reactRouter(), tsconfigPaths()],
});

For Cloudflare-based setups, the README points readers to an optimizeDeps block in vite.config.js. The example shown in the README is effectively a placeholder, so the exact entries are not documented in this repo; engineers should consult the linked documentation site for full guidance.

The package is written in TypeScript and released under the MIT license. It is intended for React Router v7+ projects, with the older branch available for users still maintaining Remix v2-era code.

Caveats worth flagging:

• The README only documents Vite-based setup; there is no guidance for non-Vite frameworks in the supplied source.
• The Cloudflare optimizeDeps snippet in the README is a stub rather than a complete configuration.
• Detailed usage beyond the install step is not in the README; the full guide lives at the external documentation site linked in the README.