Add New Route

In crema we have categorized the routing in the 3 different category like below

1. Un-Authorized Route: In this category only the authentication routes come like sign-in, sign-up, forgot-password etc.

2. Authorized Route: All the protected routes land in this category. only authenticated user can access these routes(pages)

3. Anonymous Route: In this category general purpose pages comes. these page doesn't belongs to user authorization state. like 404, 500, maintenance, coming soon etc Here is the main routing structure

 <AppErrorBoundary>
  {generateRoutes({
    isAuthenticated: isAuthenticated, // user authentication state 
    userRole: user.role,              // user role
    unAuthorizedStructure,            // all the un-authentated routes goes here
    authorizedStructure,              // all the authentated routes goes here
    anonymousStructure,               // all the anonymous routes goes here
  })}
  <Routes>
    <Route path='/' element={<Navigate to={initialUrl} />} />
  </Routes>
</AppErrorBoundary>

####################

const authorizedStructure = {
  fallbackPath: '/signin',            // when user is not-autheticate then land here
  unAuthorizedComponent: <Error403 />,// when user is autheticate but not authorized then land here
  routes: [                           // all authorized routed goes here
    ...dashBoardConfigs,
    ...appsConfig,
  ],
};

const unAuthorizedStructure = {
  fallbackPath: initialUrl, // first route after login, you can change it as you want
  routes: authRouteConfig,
};

const anonymousStructure = {
  routes: errorPagesConfigs.concat([
    {
      path: '*',
      element: <Navigate to='/error-pages/error-404' />,// setting 404 route
    },
  ]),
};

To add a route you need to decide first which kind of route you want to add. After decide the category above mentioned. If your route came in the Un-Authorized or Anonymous category then you just need to add your route in the particular object's routes property. You need to create a directory regarding your route, with the route name. In this directory all the file related to routes land.

If your route land on the authorized category then you need to follow the some extra steps as below describe and don't forget to add that route in the authorizedStructure object at the end

Adding a new menu in the Crema is a cup of cake. You don't have to add the menu separately for horizontal layouts and vertical layouts. You simply have to add a new menu to a single file and the menu will be added to all the layouts automatically.

Steps to add a new menu:-

1. Go to the file with the path: -

src/pages/routesConfig.js

2. Adding a group of menu's:-

If you want to add a group of menus, Just add a new object in the above-said file with the following properties as shown below-

const routesConfig = [
...,
  {
    id: 'new-group',
    title: 'Gropup Name',
    messageId: 'sidebar.app.newGroup',
    type: 'group',
    children:[...]
  }
]

The children's property of a group contains objects as shown below.

const routesConfig = [
...,
  {
    id: 'new-group',
    title: 'Gropup Name',
    messageId: 'sidebar.app.newGroup',
    type: 'group',
    children: [
      {
        id: 'new-menu',
        title: 'New Menu',
        messageId: 'sidebar.app.dashboard.newMenu',
        type: 'item',
        icon: 'menu_icon',
        url: '/new-group/new-menu',
      },
      ...
    ],
  },
];

3. Adding Collapse type Menu:-

To add a collapse type menu, go to the 'routesConfig' file (path given in step 1) and add a new object to the 'routesConfig' array. The new object show look like this:-

const routesConfig = [
...,
  {
    id: 'new-group',
    title: 'Gropup Name',
    messageId: 'sidebar.app.newGroup',
    type: 'collapse',
    children:[...]
  }
]

4. Adding a menu item:-

Adding a menu item is very easy, You just have to add an object in the 'routesConfig' array in the 'routesConfig' file (path given in step 1). The Item object should look contain the following properties as shown in the screenshot shown below.

const routesConfig = [
...,
  {
    id: 'new-group',
    title: 'Gropup Name',
    messageId: 'sidebar.app.newGroup',
    type: 'collapse',
    children: [
      {
        id: 'new-menu',
        title: 'New Menu',
        messageId: 'sidebar.app.dashboard.newMenu',
        type: 'item',
        icon: 'menu_icon',
        url: '/new-group/new-menu',
      },
      ...
    ],
  },
];

In the nutshell, You just have to add an object in order to array a new menu. The object contains a property named 'type' which can have three values i.e. 'group', 'collapse', and 'item'. You just have to pass the correct value to this 'type' property as per the type of menu you want to add. All other properties in the object remain the same.