Link, take this sword... I mean Devtools!... to help you on your way!
Wave your hands in the air and shout hooray because TanStack Router comes with dedicated devtools! 🥳
When you begin your TanStack Router journey, you'll want these devtools by your side. They help visualize all of the inner workings of TanStack Router and will likely save you hours of debugging if you find yourself in a pinch!
The devtools are a separate package that you need to install:
npm install -D @tanstack/react-router-devtools
npm install -D @tanstack/react-router-devtools
or
pnpm add -D @tanstack/react-router-devtools
pnpm add -D @tanstack/react-router-devtools
or
yarn add -D @tanstack/react-router-devtools
yarn add -D @tanstack/react-router-devtools
or
bun add -D @tanstack/react-router-devtools
bun add -D @tanstack/react-router-devtools
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
The Devtools, if imported as TanStackRouterDevtools will not be shown in production. If you want to have devtools in an environment with process.env.NODE_ENV === 'production', use instead TanStackRouterDevtoolsInProd, which has all the same options:
import { TanStackRouterDevtoolsInProd } from '@tanstack/react-router-devtools'
import { TanStackRouterDevtoolsInProd } from '@tanstack/react-router-devtools'
The easiest way for the devtools to work is to render them inside of your root route (or any other route). This will automatically connect the devtools to the router instance.
const rootRoute = createRootRoute({
component: () => (
<>
<Outlet />
<TanStackRouterDevtools />
</>
),
})
const routeTree = rootRoute.addChildren([
// ... other routes
])
const router = createRouter({
routeTree,
})
function App() {
return <RouterProvider router={router} />
}
const rootRoute = createRootRoute({
component: () => (
<>
<Outlet />
<TanStackRouterDevtools />
</>
),
})
const routeTree = rootRoute.addChildren([
// ... other routes
])
const router = createRouter({
routeTree,
})
function App() {
return <RouterProvider router={router} />
}
If rendering the devtools inside of the RouterProvider isn't your cup of tea, a router prop for the devtools accepts the same router instance you pass to the Router component. This makes it possible to place the devtools anywhere on the page, not just inside the provider:
function App() {
return (
<>
<RouterProvider router={router} />
<TanStackRouterDevtools router={router} />
</>
)
}
function App() {
return (
<>
<RouterProvider router={router} />
<TanStackRouterDevtools router={router} />
</>
)
}
Floating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.
Place the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work!
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
function App() {
return (
<>
<Router />
<TanStackRouterDevtools initialIsOpen={false} />
</>
)
}
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
function App() {
return (
<>
<Router />
<TanStackRouterDevtools initialIsOpen={false} />
</>
)
}
To control the position of the devtools, import the TanStackRouterDevtoolsPanel:
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
It can then be attached to provided shadow DOM target:
<TanStackRouterDevtoolsPanel
shadowDOMTarget={shadowContainer}
router={router}
/>
<TanStackRouterDevtoolsPanel
shadowDOMTarget={shadowContainer}
router={router}
/>
Click here to see a live example of this in StackBlitz.
Embedded Mode will embed the devtools as a regular component in your application. You can style it however you'd like after that!
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
function App() {
return (
<>
<Router router={router} />
<TanStackRouterDevtoolsPanel
router={router}
style={styles}
className={className}
/>
</>
)
}
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
function App() {
return (
<>
<Router router={router} />
<TanStackRouterDevtoolsPanel
router={router}
style={styles}
className={className}
/>
</>
)
}
Use these options to style the devtools.
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.