Comment on page
Routing
This template routing system based on react-router and its package react-router-dom, 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.
Open
gradient-able/src/routes.jsYou will find the below example code. In the below code we have shown how you can add a new page route.router.js
import React, { Suspense, Fragment, lazy } from 'react';
import { Switch, Redirect, Route } from 'react-router-dom';
import Loader from "./components/Loader/Loader";
import AdminLayout from "./layouts/AdminLayout";
import { BASE_URL } from "./config/constant";
export const renderRoutes = (routes = []) => (
<Suspense fallback={<Loader />}>
<Switch>
{routes.map((route, i) => {
const Guard = route.guard || Fragment;
const Layout = route.layout || Fragment;
const Component = route.component;
return (
<Route
key={i}
path={route.path}
exact={route.exact}
render={(props) => (
<Guard>
<Layout>
{route.routes
? renderRoutes(route.routes)
: <Component {...props} />}
</Layout>
</Guard>
)}
/>
);
})}
</Switch>
</Suspense>
);
const routes = [
{
exact: true,
path: '/404',
component: lazy(() => import('./views/errors/NotFound404'))
},
...,
,
{
path: '*',
exact: true,
component: () => <Redirect to={BASE_URL}/>
}
];
To add menu items you can use file
gradient-able/src/menu-items.js. In the below code, we have shown how you can use a new menu item.menus-items.js
export default {
items: [
{
id: 'navigation',
title: 'Navigation',
type: 'group',
icon: 'icon-navigation',
children: [
{
id: 'dashboard',
title: 'Dashboard',
type: 'collapse',
icon: 'feather icon-home',
children: [
{
id: 'server',
title: 'Server',
type: 'item',
url: '/dashboard/server'
},
{
id: 'shop',
title: 'Shop',
type: 'item',
url: '/dashboard/shop',
badge: {
title: 'NEW',
type: 'badge-danger'
}
}
]
},
]
},
...
...
...
{
id: 'support',
title: 'Support',
type: 'group',
icon: 'icon-support',
children: [
{
id: 'menu-level',
title: 'Menu Levels',
type: 'collapse',
icon: 'feather icon-menu',
children: [
{
id: 'menu-level-1.1',
title: 'Menu Level 1.1',
type: 'item',
url: '#!',
},
{
id: 'menu-level-1.2',
title: 'Menu Level 2.2',
type: 'collapse',
children: [
{
id: 'menu-level-2.1',
title: 'Menu Level 2.1',
type: 'item',
url: '#',
},
{
id: 'menu-level-2.2',
title: 'Menu Level 2.2',
type: 'collapse',
children: [
{
id: 'menu-level-3.1',
title: 'Menu Level 3.1',
type: 'item',
url: '#',
},
{
id: 'menu-level-3.2',
title: 'Menu Level 3.2',
type: 'item',
url: '#',
}
]
}
]
}
]
},
{
id: 'disabled-menu',
title: 'Disabled Menu',
type: 'item',
url: '#',
classes: 'nav-item disabled',
icon: 'feather icon-power'
},
{
id: 'sample-page',
title: 'Sample Page',
type: 'item',
url: '/sample-page',
classes: 'nav-item',
icon: 'feather icon-sidebar'
}
]
}
]
}
Last modified 8mo ago