Installing and Initial Setup of TanStack Router Devtools

Showcase the installation process using npm or yarn and demonstrate the basic setup in a JavaScript project, including importing and initializing TanStack Router Devtools.

// Installing TanStack Router Devtools using npm
npm install @tanstack/router-devtools

This command installs the TanStack Router Devtools package using npm. You can alternatively use yarn by running 'yarn add @tanstack/router-devtools' if you prefer yarn over npm.

// Importing Router Devtools
import { DevTools } from '@tanstack/router-devtools';

After installing, you import DevTools from the @tanstack/router-devtools package. This module provides the development tools for debugging routing.

// Initializing Router Devtools in your application
class App extends React.Component {
  render() {
    return (
      <>
        <RouterProvider router={router}>
          {/* Your route components go here */}
        </RouterProvider>
        <DevTools />
      </>
    );
  }
}

This snippet shows how to integrate DevTools into your React application. You wrap your app's routing context with <RouterProvider> from @tanstack/react-router and include <DevTools /> at a top level in your component tree for it to capture routing information.