Routing

This article does not cover the settings in next.js because the next.js documentation is quite complete here

Create react app, Vite.js

The routing is based on react-router.

In this page you will find how to add new routes and how we handle existing routes.

You can find the template's router configuration in src/routes/sections/index.js contains all routes of our template.

Apply version CRA, Vite.js, Next.js.
Example: Add a new item navigation in the dashboard layout.

Example base on starter version

// src/layouts/nav-config-dashboard.tsx
 
export const navData = [
  {
    subheader: 'Overview',
    items: [
      {
        title: 'One',
        path: paths.dashboard.root,
        icon: ICONS.dashboard,
        info: <Label>v{CONFIG.appVersion}</Label>,
      },
      { title: 'Two', path: paths.dashboard.two, icon: ICONS.ecommerce },
      { title: 'Three', path: paths.dashboard.three, icon: ICONS.analytics },
      { title: 'New page', path: '/dashboard/new-page', icon: ICONS.analytics },
    ],
  },
  {
    subheader: 'Management',
    items: [
      {
        title: 'Group',
        path: paths.dashboard.group.root,
        icon: ICONS.user,
        children: [
          { title: 'Four', path: paths.dashboard.group.root },
          { title: 'Five', path: paths.dashboard.group.five },
          { title: 'Six', path: paths.dashboard.group.six },
        ],
      },
    ],
  },
];

Add a new route (Vite.js)

Example base on starter version

// src/routes/sections/dashboard.tsx
 
const IndexPage = lazy(() => import('src/pages/dashboard/one'));
const PageTwo = lazy(() => import('src/pages/dashboard/two'));
const PageThree = lazy(() => import('src/pages/dashboard/three'));
const PageFour = lazy(() => import('src/pages/dashboard/four'));
const PageFive = lazy(() => import('src/pages/dashboard/five'));
const PageSix = lazy(() => import('src/pages/dashboard/six'));
const NewPage = lazy(() => import('src/pages/dashboard/new-page'));
 
const dashboardLayout = () => (
  <DashboardLayout>
    <Suspense fallback={<LoadingScreen />}>
      <Outlet />
    </Suspense>
  </DashboardLayout>
);
 
export const dashboardRoutes = [
  {
    path: 'dashboard',
    element: CONFIG.auth.skip ? dashboardLayout() : <AuthGuard>{dashboardLayout()}</AuthGuard>,
    children: [
      { element: <IndexPage />, index: true },
      { path: 'two', element: <PageTwo /> },
      { path: 'three', element: <PageThree /> },
      { path: 'new page', element: <NewPage /> },
      {
        path: 'group',
        children: [
          { element: <PageFour />, index: true },
          { path: 'five', element: <PageFive /> },
          { path: 'six', element: <PageSix /> },
        ],
      },
    ],
  },
];

Add a new route (Next.js)

create src/app/dashboard/new-page/page.(jsx | tsx)
https://nextjs.org/docs/app/building-your-application/routing/pages

Set the index page

Set default page when visit website.

Check out the full and starter versions to see the difference

export const routesSection = [
 
    { // Set index page with skip home page
      path: '/',
      element: <Navigate to={CONFIG.auth.redirectPath} replace />,
    },
    { // Set index page with home page
      path: '/',
      element: (
        <MainLayout>
          <Outlet />
        </MainLayout>
      ),
      children: [{ element: <HomePage />, index: true }],
    },
];

src/routes/sections/index.js

Usage

import Link from '@mui/material/Link';
import { RouterLink } from 'src/routes/components';
 
<Link component={RouterLink} href="/new" underline="none" variant="subtitle2">
  Go to About us
</Link>;

Display with role

https://minimals.cc/components/extra/navigation-bar

https://minimals.cc/dashboard/permission

const navData = [
  {
    subheader: 'Marketing',
    items: [
      {
        title: 'Landing',
        path: '/landing',
        icon: <Iconify icon="carbon:bat" width={1} />,
        roles: ['admin'],
        caption: 'Display only admin role',
      },
      {
        title: 'Services',
        path: '/services',
        icon: <Iconify icon="carbon:cyclist" width={1} />,
        roles: ['admin', 'user'],
      },
    ],
  },
];

config-navigation.js