using createBrowseRrouter,and seprated routes file

Author: mariam123hagras

web/src/App.tsx

@@ -1,62 +1,10 @@
-import React from 'react';
-import {
-	createBrowserRouter,
-	RouterProvider,
-	Navigate,
-} from 'react-router-dom';
+import { RouterProvider } from 'react-router';
+import router from './routes/routes';
 import { AuthProvider } from './context/AuthContext';
-import { ProtectedRoute, PublicRoute } from './guards/RouteGuards';
-import { AuthPage } from './components/pages/AuthPage';
-import { DashboardPage } from './components/pages/DashboardPage';
-import { LandingCard } from './components/organisms/LandingCard';
-import { LoginCard } from './components/organisms/LoginCard';
-import { RegisterCard } from './components/organisms/RegisterCard';
-import { AUTH_ROUTES, AUTH_ROUTE_SEGMENTS } from './routes/authRoutes';
-
-const router = createBrowserRouter([
-	{
-		path: AUTH_ROUTES.base,
-		element: <PublicRoute />,
-		children: [
-			{
-				element: <AuthPage />,
-				children: [
-					{
-						index: true,
-						element: <LandingCard />,
-					},
-					{
-						path: AUTH_ROUTE_SEGMENTS.login,
-						element: <LoginCard />,
-					},
-					{
-						path: AUTH_ROUTE_SEGMENTS.register,
-						element: <RegisterCard />,
-					},
-				],
-			},
-		],
-	},
-	{
-		path: '/dashboard',
-		element: <ProtectedRoute />,
-		children: [
-			{
-				index: true,
-				element: <DashboardPage />,
-			},
-		],
-	},
-	{
-		path: '*',
-		element: <Navigate to={AUTH_ROUTES.base} replace />,
-	},
-]);
-
 const App: React.FC = () => {
 	return (
 		<AuthProvider>
-			<RouterProvider router={router} />
+			<RouterProvider router={router} />;
 		</AuthProvider>
 	);
 };

web/src/guards/RouteGuards.tsx

@@ -1,27 +1,28 @@
-import React from 'react'
-import { Navigate, Outlet } from 'react-router-dom'
-import { useAuth } from '../context/AuthContext'
-import { LoadingScreen } from '../components/atoms/LoadingScreen'
-import { AUTH_ROUTES } from '../routes/authRoutes'
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { AUTH_ROUTES } from '../routes/authRoutes';
 
 // ─── Protected Route ─────────────────────────────────────────
 // Redirects unauthenticated users to /auth
-export const ProtectedRoute: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
-  const { user, loading } = useAuth()
+export const ProtectedRoute: React.FC<{ children?: React.ReactNode }> = ({
+	children,
+}) => {
+	const { user } = useAuth();
 
-  if (loading) return <LoadingScreen />
-  if (!user) return <Navigate to={AUTH_ROUTES.base} replace />
+	if (!user) return <Navigate to={AUTH_ROUTES.base} replace />;
 
-  return children ? <>{children}</> : <Outlet />
-}
+	return children ? <>{children}</> : <Outlet />;
+};
 
 // ─── Public Route ─────────────────────────────────────────────
 // Redirects authenticated users away from auth pages to /dashboard
-export const PublicRoute: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
-  const { user, loading } = useAuth()
+export const PublicRoute: React.FC<{ children?: React.ReactNode }> = ({
+	children,
+}) => {
+	const { user } = useAuth();
 
-  if (loading) return <LoadingScreen />
-  if (user) return <Navigate to="/dashboard" replace />
+	if (user) return <Navigate to="/dashboard" replace />;
 
-  return children ? <>{children}</> : <Outlet />
-}
+	return children ? <>{children}</> : <Outlet />;
+};

web/src/routes/AppRouter.tsx

@@ -0,0 +1,53 @@
+import { createBrowserRouter, Navigate } from "react-router";
+import { ProtectedRoute, PublicRoute } from "../guards/RouteGuards";
+
+import { AuthPage } from "../components/pages/AuthPage";
+import { DashboardPage } from "../components/pages/DashboardPage";
+
+import { LandingCard } from "../components/organisms/LandingCard";
+import { LoginCard } from "../components/organisms/LoginCard";
+import { RegisterCard } from "../components/organisms/RegisterCard";
+
+import { AUTH_ROUTES, AUTH_ROUTE_SEGMENTS } from "./authRoutes";
+
+const routes = createBrowserRouter([
+  {
+    path: AUTH_ROUTES.base,
+    element: <PublicRoute />,
+    children: [
+      {
+        element: <AuthPage />,
+        children: [
+          {
+            index: true,
+            element: <LandingCard />,
+          },
+          {
+            path: AUTH_ROUTE_SEGMENTS.login,
+            element: <LoginCard />,
+          },
+          {
+            path: AUTH_ROUTE_SEGMENTS.register,
+            element: <RegisterCard />,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: "/dashboard",
+    element: <ProtectedRoute />,
+    children: [
+      {
+        index: true,
+        element: <DashboardPage />,
+      },
+    ],
+  },
+  {
+    path: "*",
+    element: <Navigate to={AUTH_ROUTES.base} replace />,
+  },
+]);
+
+export default routes;