Buy NowGet Update

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-dom (version 6).

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.

Add a new item navigation

Apply version CRA, Vite.js, Next.js.

export const navConfig = [
  {
    title: 'Home',
    path: '/',
  },
  {
    title: 'About',
    path: '/about',
  },
  {
    title: 'New Page',
    path: '/new-page',
  },
  {
    title: 'Pages',
    path: '/pages',
    children: [
      {
        subheader: 'Nested',
        items: [
          { title: 'item 1', path: '/pages/item-1' },
          { title: 'item 2', path: '/pages/item-2' },
        ],
      },
    ],
  },
];
config-navigation.js
Add a new route

Apply version CRA, Vite.js.

import { lazy } from 'react';
 
const NewPage = lazy(() => import('src/pages/NewPage'));
 
export default function Router() {
  return useRoutes([
    {
      element: (
        <MainLayout>
          <Outlet />
        </MainLayout>
      ),
      children: [
        { path: <HomePage />, index: true }, // => '/'
        { path: 'new-page', element: <NewPage /> }, // => '/new-page'
        {
          path: 'pages',
          children: [
            { element: <Pages />, index: true }, // => '/pages'
            { path: 'color', element: <ColorPage /> }, // => '/pages/color'
          ],
        },
      ],
    },
  ]);
}
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>;
Set the index page

Set default page when visit website.

Vite.js
export default function Router() {
  return useRoutes([
    {
      element: (
        <MainLayout>
          <Suspense fallback={<SplashScreen />}>
            <Outlet />
          </Suspense>
        </MainLayout>
      ),
      children: [
        { element: <IndexPage />, index: true },
      ],
    },
  ]);
}
src/routes/sections/index.js

Next.js
import HomeView from 'src/sections/_home/view/home-view';
 
export const metadata = {
  title: 'The starting point for your next project',
};
 
export default function HomePage() {
  return <HomeView />;
}
src/app/page.js