🚀 Routing | React Data Router Demo

A modern, high-fidelity React application demonstrating the power of React Router 6.4+ Data APIs. This project moves away from traditional useEffect data fetching in favor of Loaders for a faster, flicker-free user experience.

---

🧠 Technical Concepts Used

1. Data Routing (createBrowserRouter)

Instead of the old <BrowserRouter>, this project uses the Data Router setup.

• Benefit: Allows us to fetch data before the component even mounts.
• File: App.jsx

2. Loaders (useLoaderData)

The "Brain" of the data flow.

• Mechanism: We defined profilesLoader and profileLoader functions.
• Result: No more "Loading..." spinners. The data is injected directly into the component via the useLoaderData() hook.

3. Nested Routes & Outlets

• Concept: The Dashboard acts as a shell.
• Outlet: The <Outlet /> component in Dashboard.jsx acts as a dynamic placeholder for nested children like ProfilesOverview and Profile.

4. Dynamic Params (useParams)

Used in the Profile page to grab the specific :id from the URL to display the correct user details.

---

🛠️ Folder Structure

src/
├── components/
│   └── Navbar.jsx       # Sticky glassmorphism nav
├── pages/
│   ├── Home.jsx         # App Manual & Root explanation
│   ├── About.jsx        # Static route example
│   ├── Contact.jsx      # useNavigate implementation
│   ├── Dashboard.jsx    # Nested route parent (Outlet)
│   ├── ProfilesOverview.jsx # Loader & List view
│   ├── Profile.jsx      # Dynamic params & Loader view
│   └── NotFound.jsx     # Custom 404 handler
└── App.jsx              # Router & Route definitions

---

🚀 Getting Started

1. Install dependencies:

   npm install

2. Run the dev server:

   npm run dev

3. Routing logic: Check App.jsx to see how the router object is constructed using createRoutesFromElements.

---

📝 Dev Notes Summary

Every page in this project includes a "Knowledge Overlay" (Notes). These sections explain exactly which React Router hook or concept is being used in that specific component, making it a perfect learning template.