Able Pro
React
React
  • ✨Overview
  • 🌱Pre-requisites
  • 🚀Quick Start
  • 📂Folder Structure
  • 🌀State Management
  • 🔒Authentication
    • Switch to Auth0
    • Switch to Firebase
    • Switch to AWS Cognito
  • 🛣️Routing
  • 📡Axios API Calls
  • 🌐Internationalization
  • 🎭Theme/Style Configuration
  • 🎨Color Presets
  • 🛠️Project Configuration
  • 📚How to's
    • Login as First Page
    • Dashboard as First Page
    • Render Menu from the backend
    • Remove menu render from Backend
    • Remove Auth
  • 🤝Integration
    • Seed
    • Comparison
  • 📦Dependencies
  • 🖌️Figma
  • 🆘Support
  • 🗓️Roadmap
  • 📅Changelog
Powered by GitBook
On this page
  • Configure route
  • Add a New menu/route in the main layout

Routing

Page and URL routing

PreviousSwitch to AWS CognitoNextAxios API Calls

Last updated 2 months ago

Able Pro routing system is based on and its package it's also using code splitting for better performance.

How can I add a new page with a menu item?

You can use the below explanation to add/remove menu routes and their menu items.

Configure route

Open src\routes\index.jsx You will find the below example code. In the below code we have shown four different routes. <MainRoutes/> is the main layout routing you see after login.

src/routes/index.txs
import { lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';

// project-imports
import MainRoutes from './MainRoutes';
import LoginRoutes from './LoginRoutes';
import ComponentsRoutes from './ComponentsRoutes';

import { SimpleLayoutType } from 'config';
import SimpleLayout from 'layout/Simple';
import Loadable from 'components/Loadable';

// render - landing page
const PagesLanding = Loadable(lazy(() => import('pages/landing')));

// ==============================|| ROUTES RENDER ||============================== //

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <SimpleLayout layout={SimpleLayoutType.LANDING} />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        }
      ]
    },
    LoginRoutes,
    ComponentsRoutes,
    MainRoutes
  ],
  { basename: import.meta.env.VITE_APP_BASE_NAME }
);

export default router;
src/routes/index.jxs
import { lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';

// project-imports
import ComponentsRoutes from './ComponentsRoutes';
import LoginRoutes from './LoginRoutes';
import MainRoutes from './MainRoutes';

import Loadable from 'components/Loadable';
import { SimpleLayoutType } from 'config';
import SimpleLayout from 'layout/Simple';

// render - landing page
const PagesLanding = Loadable(lazy(() => import('pages/landing')));

// ==============================|| ROUTES RENDER ||============================== //

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <SimpleLayout layout={SimpleLayoutType.LANDING} />,
      children: [
        {
          index: true,
          element: <PagesLanding />
        }
      ]
    },
    LoginRoutes,
    ComponentsRoutes,
    MainRoutes
  ],
  { basename: import.meta.env.VITE_APP_BASE_NAME }
);

export default router;

Add a New menu/route in the main layout

To add one more menu item in <MainRoutes />, update the following file at the same location src\routes\MainRoutes.js

MainRoutes.txs
...
...
const SamplePage = Loadable(lazy(() => import('pages/extra-pages/sample-page')));
// import new view and save it in constant. for e.g
const NewMenu = Loadable(lazy(() => import('views/new-menu')));

const MainRoutes = {
    path: '/',
    children: [
                {
                  path: '/',
                  element: <DashboardLayout />,
                  children: [
                    {
                        path: '/sample-page',
                        element: <SamplePage />
                    },
                    {
                        path: '/newmenu',
                        element: <NewMenu />
                    }
                  ]
                }
    ]            
};

export default MainRoutes;
MainRoutes.jxs
...
...
const SamplePage = Loadable(lazy(() => import('pages/extra-pages/sample-page')));
// import new view and save it in constant. for e.g
const NewMenu = Loadable(lazy(() => import('views/new-menu')));

const MainRoutes = {
    path: '/',
    children: [
                {
                  path: '/',
                  element: <DashboardLayout />,
                  children: [
                    {
                        path: '/sample-page',
                        element: <SamplePage />
                    },
                    {
                        path: '/newmenu',
                        element: <NewMenu />
                    }
                  ]
                }
    ]            
};

export default MainRoutes;

Any route added in <MainLayout> will automatically go through <AuthGuard>

🛣️
react-router
react-router-dom,