Add React Router DevTools Not Work

[sombochea]

Hi, contributors

I have a question about React Router DevTools. In my current project, I can't use DevTools for debugging my routes and I'm trying to use example code from TanStack/router too, but it's not working for me. It shows up below:

In Browser Console

In the original file App.tsx

import {createReactRouter, createRouteConfig, Link, Outlet, RouterProvider,} from '@tanstack/react-router';
import React from 'react';
import './App.css';
import SignIn from "./components/SignIn";
import {BlankLayout} from "./layouts";
import {TanStackRouterDevtools} from "@tanstack/react-router-devtools";

const rootRoute = createRouteConfig({
    component: () => {
        return (
            <>
                <div className="p-2 flex gap-2 text-lg">
                    <Link
                        to="/"
                        activeProps={{
                            className: 'font-bold',
                        }}
                        activeOptions={{exact: true}}
                    >
                        Home
                    </Link>{' '}
                    <Link
                        to="/login"
                        activeProps={{
                            className: 'font-bold',
                        }}
                    >
                        Login
                    </Link>
                </div>
                <hr/>
                <Outlet/>
            </>
        );
    },
});

const indexRoute = rootRoute.createRoute({
    path: '/',
    component: () => {
        return (
            <div className="p-2">
                <h3>Welcome Home!</h3>
            </div>
        );
    },
});

const loginRoute = rootRoute.createRoute({
    path: '/login',
    component: () => <BlankLayout><SignIn/></BlankLayout>,
});

const routeConfig = rootRoute.addChildren([indexRoute, loginRoute]);

const router = createReactRouter({
    routeConfig,
    defaultPreload: 'intent',
});

const App = () => {
    return (
        <React.Suspense fallback={<>Loading...</>}>
            <RouterProvider router={router}/>
            <TanStackRouterDevtools router={router}/>
        </React.Suspense>
    );
};

export default App;

What's wrong with my code above, is correct?

Also, if can make an update to the latest example in the document website is better.
Thank you!

[SeanCassiere]

This wasn't working because the TanStackRouterDevtools component wasn't correctly handling the router instance.

This should get fixed with #1336.

[schiller-manuel]

released in https://github.com/TanStack/router/releases/tag/v1.20.3