Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | import {
Navigate,
Route,
BrowserRouter as Router,
Routes,
} from "react-router-dom";
import "./App.css";
import { Dashboard } from "./components/Dashboard";
import { Login } from "./components/Login";
import { Navbar } from "./components/Navbar";
import { ProductDetail } from "./components/ProductDetail";
import { ProductForm } from "./components/ProductForm";
import { ProductList } from "./components/ProductList";
import { AuthProvider, useAuth } from "./contexts/AuthContext";
// Protected Route component
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
const { isAuthenticated, initializing } = useAuth();
if (initializing) {
return <div>Loading...</div>; // or nothing
}
return isAuthenticated ? <>{children}</> : <Navigate to="/login" />;
};
// Public Route component (redirect to dashboard if already authenticated)
const PublicRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const { isAuthenticated } = useAuth();
return !isAuthenticated ? <>{children}</> : <Navigate to="/dashboard" />;
};
function AppContent() {
return (
<div className="App">
<Navbar />
<main className="main-content">
<Routes>
{/* Public routes */}
<Route
path="/login"
element={
<PublicRoute>
<Login />
</PublicRoute>
}
/>
{/* Protected routes */}
<Route
path="/dashboard"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
<Route
path="/products"
element={
<ProtectedRoute>
<ProductList />
</ProtectedRoute>
}
/>
<Route
path="/products/create"
element={
<ProtectedRoute>
<ProductForm />
</ProtectedRoute>
}
/>
<Route
path="/products/edit/:id"
element={
<ProtectedRoute>
<ProductForm />
</ProtectedRoute>
}
/>
<Route
path="/products/:id"
element={
<ProtectedRoute>
<ProductDetail />
</ProtectedRoute>
}
/>
{/* Default redirect */}
<Route path="/" element={<Navigate to="/dashboard" />} />
{/* 404 page */}
<Route path="*" element={<div>Page not found</div>} />
</Routes>
</main>
</div>
);
}
function App() {
return (
<Router>
<AuthProvider>
<AppContent />
</AuthProvider>
</Router>
);
}
export default App;
|