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.tsx

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

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

export { routes, nonAuthRoutes };
  

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

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.tsx

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

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

export default App;