Skip to content

Latest commit

 

History

History
102 lines (81 loc) · 3.22 KB

README.md

File metadata and controls

102 lines (81 loc) · 3.22 KB

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
  1. Install dependencies
npm install
# or
yarn
  1. Start the development server
npm run dev
# or
yarn dev
  1. 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: