Visualizing Routes with TanStack Router Devtools

Provide an example of how to use TanStack Router Devtools to visualize the route hierarchy in a React application, highlighting parent and child routes.

import { createBrowserRouter, RouterProvider } from '@tanstack/react-router';
import { DevTools } from '@tanstack/router-devtools';

First, import necessary modules from '@tanstack/react-router' for creating a router and rendering it. Then, import the DevTools component from '@tanstack/router-devtools' for visualizing the routes.

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />, // Assuming a Home component exists
    children: [
      { path: 'about', element: <About /> }, // Assuming an About component exists
      { path: 'contact', element: <Contact /> } // Assuming a Contact component exists
    ]
  }
]);

Create a router instance using `createBrowserRouter`, defining a route tree with a parent route (Home) and child routes (About, Contact). Each route is associated with a component.

function App() {
  return (
    <>
      <RouterProvider router={router} />
      <DevTools router={router} />
    </>
  );
}

Wrap the application with `RouterProvider` to provide routing context using the defined router. Then, use the `DevTools` component and pass the router instance to it for visualizing the route hierarchy.