Render TanStackDevtools outside a plugin-context

[SimonSimCity]

When reading the docs, I got the impression, that the tabs somehow would be aware of whether they are within a context or not - e.g. that TanStackRouterDevtoolsPanel would only try to render if RouterProvider is initialized.

Since part of my website (the authentication mechanism) is wrapped around the router (the router is not rendered if the user is not authenticated), I am unsure of where to add this plugin.

I cannot put the code right within StrictMode - as shown in the example in https://tanstack.com/devtools/latest/docs/framework/react/basic-setup#setup, because in order to use TanStackRouterDevtoolsPanel, I need to render it within the RouterProvider, otherwise I get an exception.

What's the proper way of solving this?

[lMysticl]

You do not need to put the whole TanStackDevtools component inside RouterProvider.

TanStackRouterDevtoolsPanel accepts an explicit router prop. Its implementation uses that prop when provided and only falls back to router context otherwise. Pass it the same router instance that you later give to RouterProvider:

<>
  {isAuthenticated ? (
    <RouterProvider router={router} />
  ) : (
    <Login />
  )}

  <TanStackDevtools
    plugins={[
      {
        name: "TanStack Router",
        render: <TanStackRouterDevtoolsPanel router={router} />,
      },
    ]}
  />
</>

That allows the devtools to live outside the authenticated router subtree without the missing-context exception.

If you do not want the Router tab to appear before authentication, conditionally include that plugin:

const plugins = isAuthenticated
  ? [{
      name: "TanStack Router",
      render: <TanStackRouterDevtoolsPanel router={router} />,
    }]
  : []

The important part is to reuse the same router instance rather than creating a second router for the panel.

This usage is shown in the @tanstack/react-devtools README, and the panel source confirms the selection is propsRouter ?? hookRouter.