Routing Guide

This document explains the routing setup in your React TypeScript project using react-router-dom.

1. Overview

• Routes:(wrapped with Layout) → For authenticated users, includes sidebar & topbar..
• NonAuthRoutes: (wrapped with NonLayout) → For unauthenticated users, such as login or error pages.

2.Folder Structure:

3. Defining Routes in the src/routes/allRoutes.jsx

import DashboardsPage from '@pages/dashboards/ecommerce'
import Analytics from '@pages/dashboards/analytics'
import ContactUs from '../pages/page/contactUs'
import SignInBasicPage from '../pages/auth/signinBasic'


const routes = [
  { path: "/", component: <DashboardsPage /> },
  { path: "/dashboards/analytics", component: <Analytics /> },
];

const nonAuthRoutes = [
  { path: "/page/contact-us", component: <ContactUs /> },
  { path: "/page/auth/signin-basic", component: <SignInBasicPage /> },
];

export { routes, nonAuthRoutes };
  

4. Implementing Routing in the src/routes/index.jsx

import { Route, Routes } from "react-router-dom";
import { nonAuthRoutes, routes } from "./allRoutes";
import NonLayout from "@src/layout/nonLayout";
import Layout from "@src/layout/layout";

const Routing = () => {
  return (
    <Routes>
      {(routes || []).map((item, key) => (
        <Route
          key={key}
          path={item.path}
          element={<Layout>{item.component}</Layout>}
        />
      ))}

      {(nonAuthRoutes || []).map((item, key) => (
        <Route
          key={key}
          path={item.path}
          element={<NonLayout>{item.component}</NonLayout>}
        />
      ))}
    </Routes>
  );
};

export default Routing;
  

Integrating Routing in src/App.jsx

import { BrowserRouter } from "react-router-dom";
import Routing from "./routes/Routing";

function App() {
  return (
      <Routing />
  );
}

export default App;