React Router Application

A comprehensive React application showcasing React Router v6 capabilities with nested routes, protected routes, and modern UI patterns.

Features

• 🚀 React Router v6 implementation
• 🔒 Protected routes with authentication context
• 📱 Responsive layout with navigation
• 📊 Dashboard with nested routes
• 🛍️ Product browsing with category filtering
• 👤 User authentication flow

Project Structure

ReactRouting/
├── public/            # Static files
├── src/
│   ├── components/    # Reusable UI components
│   │   ├── Layout.jsx       # Main layout with Outlet
│   │   ├── Navbar.jsx       # Navigation component
│   │   ├── ProductCard.jsx  # Product display component
│   │   └── ProtectedRoute.jsx # Auth protection wrapper
│   ├── contexts/      # React context providers
│   │   └── AuthContext.jsx  # Authentication state management
│   ├── data/          # Mock data files
│   ├── pages/         # Page components
│   │   ├── Dashboard/       # Dashboard nested routes
│   │   │   ├── Dashboard.jsx      # Dashboard layout
│   │   │   ├── DashboardHome.jsx  # Dashboard homepage
│   │   │   ├── OrderHistory.jsx   # Order history page
│   │   │   └── UserProfile.jsx    # User profile page
│   │   ├── Products/        # Product related pages
│   │   │   ├── ProductList.jsx    # All products listing
│   │   │   ├── ProductDetail.jsx  # Single product view
│   │   │   └── CategoryProducts.jsx # Category filtered view
│   │   ├── Home.jsx         # Homepage
│   │   ├── Login.jsx        # Authentication page
│   │   └── NotFound.jsx     # 404 error page
│   ├── App.jsx        # Main routing configuration
│   ├── index.css      # Global styles
│   └── main.jsx       # Application entry point with BrowserRouter
└── package.json       # Project dependencies and scripts

Routing Structure

The application demonstrates several React Router v6 features:

• Nested Routes: Dashboard section using the Outlet component
• Route Parameters: Product details with :productId parameter
• Protected Routes: Dashboard accessible only to authenticated users
• Layout Routes: Shared layout with navbar across all pages
• Catch-all Route: NotFound page for non-existent routes

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/yourusername/ReactRouting.git
cd ReactRouting

2. Install dependencies

npm install
# or
yarn

3. Start the development server

npm run dev
# or
yarn dev

4. Open your browser and navigate to http://localhost:5173

Authentication

The app includes a context-based authentication system:

• User login with AuthContext provider
• Protected routes redirect to login
• Persistent session using local storage
• User-specific dashboard content

Learn More

This project was built with:

• React
• React Router
• Vite