Routing
React Routing

Route Configuration

The routing is based on the react-router-dom (opens in a new tab). You can find all routes inside this file src/routes/index.js. QuickFrame routing system uses code splitting for improved performance.

routes.js

_32
const routes = () => {
_32
return [
_32
// INITIAL / INDEX PAGE
_32
{ path: "/", element: <Landing /> },
_32
_32
// GLOBAL ERROR PAGE
_32
{ path: "*", element: <ErrorPage /> },
_32
_32
// AUTHENTICATION PAGES ROUTES & DIFFERENT AUTH DEMO PAGES ROUTES
_32
...AuthRoutes,
_32
_32
// COMPONENTS PAGES ROUTES
_32
...ComponentRoutes,
_32
_32
// INSIDE DASHBOARD PAGES ROUTES
_32
...DashboardRoutes,
_32
_32
// PAGES ROUTES
_32
...PublicRoutes,
_32
];
_32
};
_32
_32
// =======================================================================
_32
_32
import { createBrowserRouter, RouterProvider } from "react-router-dom";
_32
_32
// ROUTER CREATE
_32
const router = createBrowserRouter(routes());
_32
_32
const App = () => {
_32
return <RouterProvider router={router} />;
_32
};

How to add a new route?

Open file src/routes/index.jsx and update the following file if you want to add more routes.

routes/index.js

_13
const About = Loadable(lazy(() => import("pages/About")));
_13
_13
const routes = () => {
_13
return [
_13
{ path: "*", element: <ErrorPage /> },
_13
{ path: "/login", element: <Login /> },
_13
{ path: "/register", element: <Register /> },
_13
{ path: "/forget-password", element: <ForgetPassword /> },
_13
_13
// added new route
_13
{ path: "/about", element: <About /> },
_13
];
_13
};

Reference

Sidebar NavigationNextJS Routing