Dashboard as First Page

How to set Dashboards First page instead landing

VITE ( TS )

This section explains how to set the Dashboard page as the default starting page, skipping the landing page, for cases where it is not needed.

1. Update route at: src/routes/index.tsx

src/routes/index.tsx

// import { lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';

// project-imports
import AdminPanelRoutes from './AdminPanelRoutes';
import ApplicationRoutes from './ApplicationRoutes';
import ChartMapRoutes from './ChartMapRoutes';
import ComponentsRoutes from './ComponentsRoutes';
import FormsRoutes from './FormsRoutes';
import OtherRoutes from './OtherRoutes';
import PagesRoutes from './PagesRoutes';
import NavigationRoutes from './NavigationRoutes';
import TablesRoutes from './TablesRoutes';

// import Loadable from 'components/Loadable';
// import SimpleLayout from 'layout/Simple';

// const PagesLanding = Loadable(lazy(() => import('../views/Landing')));

// ==============================|| ROUTING RENDER ||============================== //

const router = createBrowserRouter(
  [
    // {
    //   path: '/',
    //   element: <SimpleLayout />,
    //   children: [
    //     {
    //       index: true,
    //       element: <PagesLanding />
    //     },
    //     {
    //       path: '/landing',
    //       element: <PagesLanding />
    //     }
    //   ]
    // },
    NavigationRoutes,
    ApplicationRoutes,
    AdminPanelRoutes,
    ComponentsRoutes,
    FormsRoutes,
    TablesRoutes,
    PagesRoutes,
    OtherRoutes,
    ChartMapRoutes
  ],
  {
    basename: import.meta.env.VITE_APP_BASE_NAME
  }
);

export default router;

1. Add default dashboard route: src\routes\NavigationRoutes.tsx

src/routes/NavigationRoutes.tsx

....

const NavigationRoutes = {
  path: '/',
  children: [
    {
      path: '/',
      element: <DashboardLayout />,
      children: [
        {
          path: '/',
          element: <DefaultPages/>
        },
        {
          path: 'dashboard',
          children: [
            {
              path: 'default',
              element: <DefaultPages/>
            },
            ....
          ]
        }
        ...
      ]
  };

VITE ( JS )

This section explains how to set the Dashboard page as the default starting page, skipping the landing page, for cases where it is not needed.

1. Update route at: src/routes/index.jsx

src/routes/index.jsx

// import { lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';

// project-imports
import AdminPanelRoutes from './AdminPanelRoutes';
import ApplicationRoutes from './ApplicationRoutes';
import ChartMapRoutes from './ChartMapRoutes';
import ComponentsRoutes from './ComponentsRoutes';
import FormsRoutes from './FormsRoutes';
import OtherRoutes from './OtherRoutes';
import PagesRoutes from './PagesRoutes';
import NavigationRoutes from './NavigationRoutes';
import TablesRoutes from './TablesRoutes';

// import Loadable from 'components/Loadable';
// import SimpleLayout from 'layout/Simple';

// const PagesLanding = Loadable(lazy(() => import('../views/Landing')));

// ==============================|| ROUTING RENDER ||============================== //

const router = createBrowserRouter(
  [
    // {
    //   path: '/',
    //   element: <SimpleLayout />,
    //   children: [
    //     {
    //       index: true,
    //       element: <PagesLanding />
    //     },
    //     {
    //       path: '/landing',
    //       element: <PagesLanding />
    //     }
    //   ]
    // },
    NavigationRoutes,
    ApplicationRoutes,
    AdminPanelRoutes,
    ComponentsRoutes,
    FormsRoutes,
    TablesRoutes,
    PagesRoutes,
    OtherRoutes,
    ChartMapRoutes
  ],
  {
    basename: import.meta.env.VITE_APP_BASE_NAME
  }
);

export default router;

1. Add default dashboard route: src/routes/NavigationRoutes.jsx

src/routes/NavigationRoutes.jsx

...
const NavigationRoutes = {
  path: '/',
  children: [
    {
      path: '/',
      element: <DashboardLayout />,
      children: [
        {
          path: '/',
          element: <DefaultPages />
        },
        {
          path: 'dashboard',
          children: [
            {
              path: 'default',
              element: <DefaultPages />
            },
            ....
          ]
        }
        ...
      ]
  };