Nextjs Routing System

We’ve created these dynamic routes, so the Sidebar component would not get too loaded with code. You will find all our demo routes in routes.js.

Legend FREE

{ path: "/path-for-component", name: "ComponentName", icon: "iconClassName", layout: "/layout-path" },

• path (path for your route - this will be seen in the browser url input - example /dashboard)
• name (name of your route - this will appear in the Sidebar and AdminNavbar components - example Dashboard)
• icon (icon to be displayed alongside with links in Sidebar component - example fa fa-heart)
• layout (path of the layout in which the View component you want to be rendered - in our template demo you only have to options: /admin and /auth - but due to this routing system you can add more, for example /new-layout)

Legend PRO

{path: "/path-name", name: "Name Of the View", icon: "icon name", layout: "/layouth-path"},

• path (path for your route - this will be seen in the browser url input - example /dashboard)
• name (name of your route - this will appear in the Sidebar and Header components)
• icon (icon to be displayed alongside with links in Sidebar component - example fa fa-heart)
• layout (path of the layout in which the View component you want to be rendered - in our template demo you only have to options: /admin and /auth - but due to this routing system you can add more, for example /new-layout)

{ collapse: true, name: "Name of the collapse group", icon: "Icon of the collapse group", state: "string", views: [arrayOfRoutes]},

• collapse (used to tell our deom app components this is a collapsible group - for components/Sidebar/Sidebar.js,layouts/Admin/Admin.js and layouts/Auth/Auth.js - you can only use it like so: collapse: true)
• name (name of collapsible group that is displayed in components/Sidebar/Sidebar.js - example Forms)
• state (name of the state used in components/Sidebar/Sidebar.js’s state to know which collapsible is active/collapsed - based on these the state of the components/Sidebar/Sidebar.js is created - exmaple pagesCollapse)
• icon (icon to be displayed alonside the name of the collapsible group - example fa fa-heart)
• views (array of links that will be part of the collapsible group)

arrayOfRoutes:

{path: "/path-name", name: "Name Of the View", miniName: "MN", layout: "/layouth-path"},

• miniName (this is a single uppercase letter that appears when the Sidebar component is minified)

{ collapse: true, name: "Name of the collapse group", state: "string", views: [arrayOfRoutes]},

Notice

For a better understanding, please take a look inside the file at hand, and also how the routes are rendered while the app is opened.

Because our routes are arrays of objects, and each route is an object, you can add what props you want in our routes and do what you want with them.

For example, if you want to “hide” a route (you want it to not be displayed in sidebar), you could add a prop like invisible: true and then in Sidebar add an if statement inside the map function of ours and do like this:

if(prop.invisible) return null;

Or, simply, you would not add it inside the routes.js file, and you would only add it inside the Switch component of your routing system (if you are still using react-router-dom - for example inside src/index.js, or src/layouts/Admin.js, or src/layouts/RTL.js, or src/layouts/Auth.js)