⚛️ React Router Explorer - Dynamic Data Fetching & Navigation

A powerful React application built to master client-side routing, nested layouts, and asynchronous data fetching. This project demonstrates how to build a seamless user experience using the latest React Router features.

🚀 Live Demo

---

🌟 Key Features & Learning Milestones

• Nested Routing: Implemented a Root layout with a Shared Header, Sidebar, and Footer using the <Outlet /> component.
• Dynamic Routing & Params: Created specialized detail pages for Users and Posts using dynamic segments like :userId and :postId.
• Advanced Data Fetching: Mastered the use of useLoaderData to pre-fetch API data from JSONPlaceholder before component rendering.
• Programmatic Navigation: Implemented the useNavigate hook for custom button-clicks and a "Go Back" feature using Maps(-1).
• Active Navigation Styling: Used <NavLink /> to provide real-time visual feedback for the currently active route.
• Async Handling: Explored the use of <Suspense /> and custom promises for handling data-heavy components.

🛠️ Tech Stack

• React.js (Functional Components & Hooks)
• React Router (Version 6+)
• JSONPlaceholder API (External Data Source)
• CSS3 (Custom Layouts & Sidebar Styling)

📂 Project Structure

src/
├── Components/
│   ├── Root/          # Main Layout Wrapper
│   ├── Header/        # Navbar with Active States
│   ├── Sidebar/       # Navigation Sidebar
│   ├── Users/         # User List with Loaders
│   ├── UserDetails/   # Dynamic Single User View
│   ├── Posts/         # Post List with Loaders
│   └── PostDetail/    # Dynamic Individual Post View
├── main.jsx           # Central Route Definition & Logic
└── index.css          # Global Styles