Routing
Page and URL routing
Berry routing system is 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.

Configure route

Open ...\src\routes\index.js 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.
Javascript
Typescript
1
...
2
...
3
4
// ===============|| ROUTING RENDER ||=================== //
5
6
export default function ThemeRoutes() {
7
return useRoutes([
8
{ path: '/', element: <PagesLanding /> },
9
AuthenticationRoutes,
10
LoginRoutes,
11
MainRoutes]);
12
}
Copied!
1
...
2
...
3
4
// ===============|| ROUTING RENDER ||=================== //
5
6
export default function ThemeRoutes() {
7
return useRoutes([
8
{ path: '/', element: <PagesLanding /> },
9
AuthenticationRoutes,
10
LoginRoutes,
11
MainRoutes]);
12
}
Copied!

Add 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
JavaScript
Typescript
MainRoutes.js
1
...
2
...
3
const SamplePage = Loadable(lazy(() => import('views/sample-page')));
4
// import new view and save it in constant. for e.g
5
const NewMenu = Loadable(lazy(() => import('views/new-menu')));
6
7
const MainRoutes = {
8
path: '/',
9
element: (
10
<AuthGuard>
11
<MainLayout />
12
</AuthGuard>
13
),
14
children: [
15
{
16
path: '/sample-page',
17
element: <SamplePage />
18
},
19
{
20
path: '/newmenu',
21
element: <NewMenu />
22
}
23
]
24
};
25
26
export default MainRoutes;
Copied!
1
...
2
...
3
const SamplePage = Loadable(lazy(() => import('views/sample-page')));
4
// import new view and save it in constant. for e.g
5
const NewMenu = Loadable(lazy(() => import('views/new-menu')));
6
7
const MainRoutes = {
8
path: '/',
9
element: (
10
<AuthGuard>
11
<MainLayout />
12
</AuthGuard>
13
),
14
children: [
15
{
16
path: '/sample-page',
17
element: <SamplePage />
18
},
19
{
20
path: '/newmenu',
21
element: <NewMenu />
22
}
23
]
24
};
25
26
export default MainRoutes;
Copied!
Any route added in <MainLayout> will automatically go through <AuthGuard>
Last modified 11d ago