Berry React
v3.7.0
v3.7.0
  • Documentation
  • 🎺About - Berry Remix
  • Pre-requisites
  • Quick Start
  • Folder Structure
  • State Management
  • Internationalization
  • Authentication
  • Axios API Calls
  • Routing
  • Project Configuration
  • Color Presets
  • Theme/Style Configuration
  • How to
    • Login as First Page
    • Add a menu from the backend
    • Remove eslint
    • Remove prettier
  • Integration
  • Resources
  • Roadmap
  • Support
  • Changelog
  • FAQ
  • Berry Eco System
Powered by GitBook
On this page
  • Configure route
  • Add New menu/route in the main layout

Was this helpful?

Routing

Page and URL routing

Was this helpful?

Berry 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.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.

...
...

// ===============|| ROUTING RENDER ||=================== //

export default function ThemeRoutes() {
    return useRoutes([
        { path: '/', element: <PagesLanding /> }, 
        AuthenticationRoutes, 
        LoginRoutes, 
        MainRoutes]);
}
...
...

// ===============|| ROUTING RENDER ||=================== //

export default function ThemeRoutes() {
    return useRoutes([
        { path: '/', element: <PagesLanding /> }, 
        AuthenticationRoutes, 
        LoginRoutes, 
        MainRoutes]);
}

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

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

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

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

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

export default MainRoutes;

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

For Remix, we not need to create this types <MainRoutes/>,

please refer:

react-router
react-router-dom,
https://remix.run/docs/en/1.14.3/guides/routing#defining-routes