Buy nowGet update

Routing

This article focuses on routing for Vite.js, Create React App (CRA) and Next.js, excluding specific Next.js configuration details.

Refer to the Next.js routing docs for more.

Overview

For Vite.js and CRA routing is based on react-router. This guide explains how to:

  • Add a new navigation item
  • Define new routes
  • Configure the index (default) page
Add a new item navigation
  • Applies to Vite.js, CRA and Next.js.
  • Add a new item in the dashboard layout navigation.
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 | CRA)

How to register a new route in the Vite.js | CRA version.

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)
Set the index page

Set default page when visit website.

Check out the full and starter versions to see the difference
export const routesSection = [
    {
      // Redirect to default path (skip homepage)
      path: '/',
      element: <Navigate to={CONFIG.auth.redirectPath} replace />,
    },
    {
      // Show homepage as index
      path: '/',
      element: (
        <MainLayout>
          <Outlet />
        </MainLayout>
      ),
      children: [{ element: <HomePage />, index: true }],
    },
];
src/routes/sections/index.js

Linking to routes using a custom component

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>;