01-installation.mdx

title	Setting up React Router Devtools
summary	Learn how to install and enable React Router Devtools in your project by adding the plugin to vite.config, with notes for Cloudflare setup.
description	Follow this page to learn how to set up React Router Devtools in your React Router project.

Installation

Adding React Router Devtools to your project is easy. First install it into your project by running:

npm install react-router-devtools -D

This will install it as a dev dependency in your project.

Enabling the tools (framework mode)

After you have installed the tools, you need to go to your vite.config.ts file which will probably look something like this:

import { reactRouter } from '@react-router/dev/vite'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

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

All you have to do is add the plugin into the plugins array in your vite.config.ts file.

import { reactRouter } from '@react-router/dev/vite'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
+ import { reactRouterDevTools } from "react-router-devtools";

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

Make sure your plugin is BEFORE the react router one!

Enabling the tools (data/declarative mode)

If you are using React Router in data/declarative mode, you can still use the devtools by first installing @tanstack/react-devtools and then adding the devtools somewhere under the router provider in your app.

import { TanStackDevtools } from '@tanstack/react-devtools';
import { EmbeddedDevTools } from 'react-router-devtools';

export function App() {
  return (
    <>
      <YourRouterProvider>
        <YourAppComponents />
        <TanStackDevtools plugins=[{
          name: "React Router",
          render: <EmbeddedDevTools />
        }] />
      </YourRouterProvider>
      <TanStackDevtools />
    </>
  );
}

react-router-devtools uses @tanstack/devtools as the base for the UI, you can refer to their documentation for more information on how to use the devtools interface.

CloudFlare

If you're trying to spin it up on CF, try adding this to your optimizeDeps in your vite.config.js file:

optimizeDeps: {
  include: [
    // other optimized deps
  ],
},

That's it!

You should now see the React Router Devtools in your browser when you run your app.