setup react router 4

package.json

@@ -14,7 +14,8 @@
     "@reduxjs/toolkit": "^2.11.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-redux": "^9.2.0"
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.13.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

src/App.jsx

@@ -1,10 +1,7 @@
+import AppRouter from './routes/AppRouter';
+
 function App() {
-  return (
-    <div>
-      <h1>StellarAid</h1>
-      <p>Welcome to StellarAid - Empowering communities through technology</p>
-    </div>
-  )
+  return <AppRouter />;
 }
 
-export default App
+export default App;

src/components/layout/MainLayout.jsx

@@ -0,0 +1,30 @@
+import { Outlet, Link } from 'react-router-dom';
+
+const MainLayout = () => {
+  return (
+    <div>
+      <header>
+        <nav style={{ display: 'flex', gap: '1rem', padding: '1rem', background: '#f0f0f0' }}>
+          <Link to="/">Home</Link>
+          <Link to="/explore">Explore</Link>
+          <Link to="/create">Create Campaign</Link>
+          <Link to="/dashboard">Dashboard</Link>
+          <Link to="/admin">Admin</Link>
+          <Link to="/login">Login</Link>
+          <Link to="/register">Register</Link>
+        </nav>
+      </header>
+
+      <main style={{ padding: '2rem' }}>
+        {/* Outlet renders the matched child route */}
+        <Outlet />
+      </main>
+
+      <footer style={{ padding: '1rem', textAlign: 'center', marginTop: 'auto', background: '#f0f0f0' }}>
+        <p>© {new Date().getFullYear()} StellarAid. All rights reserved.</p>
+      </footer>
+    </div>
+  );
+};
+
+export default MainLayout;

src/pages/Admin.jsx

@@ -0,0 +1,10 @@
+const Admin = () => {
+  return (
+    <div>
+      <h1>Admin Dashboard</h1>
+      <p>Campaign approval, KYC, and system analytics.</p>
+    </div>
+  );
+};
+
+export default Admin;

src/pages/CampaignDetails.jsx

@@ -0,0 +1,14 @@
+import { useParams } from 'react-router-dom';
+
+const CampaignDetails = () => {
+  const { id } = useParams();
+
+  return (
+    <div>
+      <h1>Campaign Details</h1>
+      <p>Viewing details for campaign ID: {id}</p>
+    </div>
+  );
+};
+
+export default CampaignDetails;

src/pages/CreateCampaign.jsx

@@ -0,0 +1,10 @@
+const CreateCampaign = () => {
+  return (
+    <div>
+      <h1>Create Campaign</h1>
+      <p>Start a new social impact project.</p>
+    </div>
+  );
+};
+
+export default CreateCampaign;

src/pages/Dashboard.jsx

@@ -0,0 +1,10 @@
+const Dashboard = () => {
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <p>Manage your account, donations, and projects.</p>
+    </div>
+  );
+};
+
+export default Dashboard;

src/pages/Explore.jsx

@@ -0,0 +1,10 @@
+const Explore = () => {
+  return (
+    <div>
+      <h1>Explore Campaigns</h1>
+      <p>Discover and fund global social impact projects.</p>
+    </div>
+  );
+};
+
+export default Explore;

src/pages/Home.jsx

@@ -0,0 +1,10 @@
+const Home = () => {
+  return (
+    <div>
+      <h1>Welcome to StellarAid</h1>
+      <p>Empowering communities through transparent blockchain crowdfunding.</p>
+    </div>
+  );
+};
+
+export default Home;

src/pages/Login.jsx

@@ -0,0 +1,10 @@
+const Login = () => {
+  return (
+    <div>
+      <h1>Login</h1>
+      <p>Sign in to your StellarAid account.</p>
+    </div>
+  );
+};
+
+export default Login;

src/pages/NotFound.jsx

@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom';
+
+const NotFound = () => {
+  return (
+    <div style={{ textAlign: 'center', marginTop: '50px' }}>
+      <h1>404 - Page Not Found</h1>
+      <p>The page you are looking for does not exist.</p>
+      <Link to="/" style={{ color: 'blue', textDecoration: 'underline' }}>Go back to Home</Link>
+    </div>
+  );
+};
+
+export default NotFound;

src/pages/Register.jsx

@@ -0,0 +1,10 @@
+const Register = () => {
+  return (
+    <div>
+      <h1>Register</h1>
+      <p>Create a new StellarAid account.</p>
+    </div>
+  );
+};
+
+export default Register;

src/routes/AppRouter.jsx

@@ -0,0 +1,37 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+// Layout
+import MainLayout from '../components/layout/MainLayout';
+
+// Pages
+import Home from '../pages/Home';
+import Explore from '../pages/Explore';
+import Login from '../pages/Login';
+import Register from '../pages/Register';
+import Dashboard from '../pages/Dashboard';
+import CampaignDetails from '../pages/CampaignDetails';
+import CreateCampaign from '../pages/CreateCampaign';
+import Admin from '../pages/Admin';
+import NotFound from '../pages/NotFound';
+
+const AppRouter = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MainLayout />}>
+          <Route index element={<Home />} />
+          <Route path="explore" element={<Explore />} />
+          <Route path="login" element={<Login />} />
+          <Route path="register" element={<Register />} />
+          <Route path="dashboard" element={<Dashboard />} />
+          <Route path="campaign/:id" element={<CampaignDetails />} />
+          <Route path="create" element={<CreateCampaign />} />
+          <Route path="admin" element={<Admin />} />
+          <Route path="*" element={<NotFound />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default AppRouter;