React JS — Routing

How Routing Works

The React JS version uses React Router v7 with createBrowserRouter. All routes are defined in src/routes/Router.tsx. Unlike Next.js, there is no file-based routing — every page must be manually registered.

Router Setup — src/routes/Router.tsx

Routes are grouped by layout: FullLayout (sidebar) and BlankLayout (auth pages).

import { lazy } from 'react';
import { Navigate, createBrowserRouter } from 'react-router';
import Loadable from '../layouts/full/shared/loadable/Loadable';

const FullLayout  = Loadable(lazy(() => import('../layouts/full/FullLayout')));
const BlankLayout = Loadable(lazy(() => import('../layouts/blank/BlankLayout')));

const MyPage = Loadable(lazy(() => import('../views/my-feature/MyPage')));

const Router = [
  {
    path: '/',
    element: <FullLayout />,          // dashboard layout with sidebar
    children: [
      { path: '/my-feature', element: <MyPage /> },
    ],
  },
  {
    path: '/',
    element: <BlankLayout />,         // blank layout for auth
    children: [
      { path: '/auth/login', element: <Login /> },
    ],
  },
];

const router = createBrowserRouter(Router);
export default router;

Add Page to Sidebar

Open src/layouts/full/vertical/sidebar/sidebaritems.ts and add a new item. The url must match the path in Router.tsx.

// src/layouts/full/vertical/sidebar/sidebaritems.ts
import { uniqueId } from 'lodash';
import { MyIcon } from 'lucide-react';

const SidebarContent: MenuItem[] = [
  {
    heading: 'My Section',
    items: [
      {
        id: uniqueId(),
        name: 'My Page',
        icon: MyIcon,
        url: '/my-feature',   // must match Router.tsx path
      },
    ],
  },
];

Navigating Between Pages

Use React Router's Link or useNavigate — never a plain <a> tag which causes full page reloads.

import { Link, useNavigate } from 'react-router';

// Declarative
<Link to="/my-feature">Go to My Page</Link>

// Programmatic
const navigate = useNavigate();
navigate('/my-feature');