How to setup route?

Create a Root Route

src/routes/_layout.tsx

                

import { createFileRoute, Outlet } from '@tanstack/react-router';
import FullLayout from '../layouts/full/FullLayout';

export const Route = createFileRoute(''/_layout'')({
      component: LayoutComponent,
});

function LayoutComponent() {
  return(
      <>
       <FullLayout>
             <Outlet/>
       <FullLayout/>

     </>
  )
};


                

Create Dashboard Routes

Each route becomes its own file (this is the TanStack “Start” way).

src/routes/_layout/index.tsx

                

import { createFileRoute, Outlet } from '@tanstack/react-router';
import FullLayout from '../layouts/full/FullLayout';
import {TopCards} from '@/components/dashboards/modern/top-cards';

export const Route = createFileRoute(''/_layout'')({
      component: RouteComponent,
});

function RouteComponent() {
  return(
      <>
       <TopCards/>
     </>
  )
};


                

How to add a page to the sidebar?

(Set the path the same as you define it in Router.tsx.)

                
// ------------------------------------------------------------------------
// File: src/layouts/full/vertical/sidebar/Sidebaritems.ts
// ------------------------------------------------------------------------

const SidebarContent: MenuItem[] = [
  {
    heading: 'Home',
    children: [
      {
        name: 'Modern',
        icon: 'solar:widget-2-linear',
        id: uniqueId(),
        url: '/',
      },
      {
        name: 'Ecommerce',
        icon: 'solar:bag-5-linear',
        id: uniqueId(),
        url: '/dashboards/eCommerce',
      },
      {
        name: 'Music',
        icon: 'solar:music-note-linear',
        id: uniqueId(),
        url: '/dashboards/music',
      },
      {
        name: 'General',
        icon: 'solar:chart-linear',
        id: uniqueId(),
        url: '/dashboards/general',
      }
    ],
  },
];