Berry React
v3.8.0
v3.8.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
    • seed
    • To Existing Project
  • Component
    • Avatar
    • AnimateButton
    • Accordion
    • Breadcrumbs
    • Chip
    • ImageList
    • MainCard
    • Transitions
    • SubCard
  • 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

Last updated 1 year ago

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