Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/hammadhttps/react-router


https://github.com/hammadhttps/react-router

animation-css concepts demonstration framer-motion lucide-react navigation react-router react-router-v7 reactjs router-dom routing

Last synced: 5 months ago
JSON representation

Awesome Lists containing this project

README 

          
# React Router 7 Concepts Demo - TechCorp





  
🧭 React Router 7 Concepts Demo


  
A comprehensive demonstration of React Router 7 features and routing concepts


  
Built with TechCorp theme for visual appeal


  

  ![React](https://img.shields.io/badge/React-19.1.0-61DAFB?style=for-the-badge&logo=react&logoColor=white)

  ![React Router](https://img.shields.io/badge/React_Router-7.7.0-CA4245?style=for-the-badge&logo=react-router&logoColor=white)

  ![Framer Motion](https://img.shields.io/badge/Framer_Motion-12.23.6-0055FF?style=for-the-badge&logo=framer&logoColor=white)

  ![Vite](https://img.shields.io/badge/Vite-7.0.4-646CFF?style=for-the-badge&logo=vite&logoColor=white)




## ✨ Overview



This project is a **comprehensive demonstration of React Router 7 concepts and features**. Using a modern TechCorp theme for visual appeal, it showcases all the essential routing patterns, navigation techniques, and advanced features that React Router 7 offers.



**Primary Purpose**: Educational demonstration of React Router 7 capabilities

**Secondary Purpose**: Modern UI/UX implementation for enhanced learning experience



## 🧭 React Router 7 Concepts Demonstrated



### **Core Routing Features**



- **Basic Routing**: Simple route definitions and navigation

- **Nested Routes**: Complex route hierarchies with layouts

- **Dynamic Routes**: URL parameters and dynamic segments

- **Route Loaders**: Data fetching with loader functions

- **Error Boundaries**: Route-level error handling

- **Programmatic Navigation**: useNavigate hook implementation

- **Active Links**: NavLink with active state styling

- **Route Layouts**: Shared layouts and outlet components



### **Advanced Routing Patterns**



- **Layout Routes**: RootLayout, ContactLayout, JobsLayout

- **Index Routes**: Default child routes

- **Catch-All Routes**: 404 handling with wildcard routes

- **Route Protection**: Error boundaries and fallbacks

- **Data Loading**: Async data fetching with loaders

- **Route Transitions**: Smooth navigation with animations



### **Navigation Concepts**



- **Declarative Navigation**: Link and NavLink components

- **Imperative Navigation**: useNavigate for programmatic routing

- **Route State**: Passing state through navigation

- **URL Parameters**: Dynamic route segments (/jobs/:id)

- **Query Parameters**: Search params handling

- **Navigation Guards**: Route-level protection patterns



## đŸŽ¯ UI/UX Features (Supporting the Demo)



### 🎨 **Design Excellence**



- **Modern Design System**: Comprehensive color palette, typography scale, and spacing system

- **Responsive Layout**: Mobile-first design that scales beautifully across all devices

- **Glass Morphism**: Contemporary backdrop blur effects and translucent elements

- **Micro-interactions**: Delightful hover states and smooth transitions

- **Professional Typography**: Inter font family with optimized readability



### ⚡ **Performance & Animation**



- **Framer Motion**: Smooth page transitions and engaging micro-animations

- **Optimized Loading**: Fast initial load times with efficient code splitting

- **Interactive Elements**: Responsive buttons, cards, and navigation components

- **Smooth Scrolling**: Enhanced user experience with fluid page interactions



### 🧭 **Navigation & Routing**



- **React Router 7 Demo**: Complete showcase of routing capabilities

- **Active States**: Visual feedback for current page navigation

- **Error Boundaries**: Comprehensive error handling with custom error pages

- **404 Handling**: Beautiful not-found page with helpful navigation options

- **Nested Routing**: Contact and Jobs sections with sub-routes

- **Dynamic Routing**: Individual job detail pages with parameters



### 📱 **Demo Pages & Routing Structure**



#### 🏠 **Home Page** (`/`)



- **Route**: Index route demonstration

- **Features**: Hero section, feature highlights, statistics

- **Routing**: Base route with navigation to all sections



#### 🛍ī¸ **Products Page** (`/product`)



- **Route**: Simple route demonstration

- **Features**: Product showcase with detailed information

- **Routing**: Direct navigation from main menu



#### ℹī¸ **About Page** (`/about`)



- **Route**: Static route with rich content

- **Features**: Company information and timeline

- **Routing**: Standard navigation pattern



#### 📞 **Contact Section** (`/contact`)



- **Route**: Layout route with nested children

- **Sub-routes**:

  - `/contact/info` - Contact information display

  - `/contact/form` - Interactive contact form

- **Features**: Demonstrates nested routing and layouts



#### đŸ’ŧ **Jobs Section** (`/jobs`)



- **Route**: Complex nested routing with data loading

- **Sub-routes**:

  - `/jobs` - Job listings with loader function

  - `/jobs/:id` - Dynamic job details with parameters

- **Features**: Data fetching, error handling, dynamic routes



#### đŸšĢ **Error Handling**



- **404 Page**: Catch-all route (`*`) for unmatched URLs

- **Error Boundaries**: Route-level error handling

- **Loading States**: Demonstrates async route transitions



## 🛠ī¸ Technology Stack



### **Core Routing**



- **Frontend Framework**: React 19.1.0

- **Routing Library**: React Router 7.7.0 (Primary Focus)



### **Supporting Technologies**



- **Animations**: Framer Motion 12.23.6

- **Icons**: Lucide React 0.525.0

- **Build Tool**: Vite 7.0.4

- **Styling**: Custom CSS with modern design system

- **Development**: ESLint for code quality



## 🗂ī¸ Routing Structure



```

/ (RootLayout)

├── / (Home - Index Route)

├── /product (Products Page)

├── /about (About Page)

├── /contact (ContactLayout)

│   ├── /contact/info (Contact Info)

│   └── /contact/form (Contact Form)

├── /jobs (JobsLayout)

│   ├── /jobs (Jobs List - with loader)

│   └── /jobs/:id (Job Details - with loader & params)

└── /* (404 Not Found - Catch-all)

```



## 🚀 Getting Started



### Prerequisites



- Node.js (version 18 or higher)

- npm or yarn package manager



### Installation



1. **Clone the React Router demo**



   ```bash

   git clone 

   cd react-router-techcorp

   ```



2. **Install dependencies**



   ```bash

   npm install

   ```



3. **Start the development server**



   ```bash

   npm run dev

   ```



4. **Open your browser**

   Navigate to `http://localhost:5173` to view the application



5. **Explore the routing concepts**

   - Navigate between pages to see route transitions

   - Visit `/contact/info` and `/contact/form` for nested routes

   - Check `/jobs/1` for dynamic routing

   - Try invalid URLs to see 404 handling



### Available Scripts



- `npm run dev` - Start development server

- `npm run build` - Build for production

- `npm run preview` - Preview production build

- `npm run lint` - Run ESLint for code quality



## 📁 Project Structure



### **Routing Architecture**



```

src/

├── Layout/             # 🧭 Route Layout Components

│   ├── RootLayout.jsx  # Main app layout with Navbar + Outlet

│   ├── ContactLayout.jsx # Contact section layout (nested routes)

│   └── JobsLayout.jsx  # Jobs section layout (nested routes)

├── pages/              # 📄 Route Components (Main Pages)

│   ├── Home.jsx        # Index route (/)

│   ├── Product.jsx     # Products route (/product)

│   ├── About.jsx       # About route (/about)

│   ├── Contact.jsx     # Contact parent route (/contact)

│   └── Jobs.jsx        # Jobs list route (/jobs) with loader

├── components/         # 🧩 Route-specific Components

│   ├── Navbar.jsx      # Navigation with NavLink examples

│   ├── Info.jsx        # Contact info route (/contact/info)

│   ├── Form.jsx        # Contact form route (/contact/form)

│   ├── JobsDetails.jsx # Dynamic job route (/jobs/:id) with loader

│   ├── NotFound.jsx    # 404 catch-all route (*)

│   └── ErrorPage.jsx   # Error boundary component

├── assets/             # 📊 Mock Data for Loaders

│   └── data.json       # Job data for loader demonstrations

├── App.jsx             # 🚀 Router Configuration & Route Definitions

├── main.jsx            # Application entry point

└── index.css           # Global styles and design system

```



## 🧭 Key React Router 7 Concepts Explained



### **1. Route Configuration**



```jsx

// App.jsx - Declarative route configuration

const router = createBrowserRouter(

  createRoutesFromElements(

    } errorElement={}>

      } />

      }>

        } />

        } />

      

      }

        loader={job_Details_Loader}

      />

    

  )

);

```



### **2. Layout Components with Outlet**



```jsx

// RootLayout.jsx - Shared layout pattern

const RootLayout = () => (

  


    

     {/* Child routes render here */}

  


);

```



### **3. Data Loading with Loaders**



```jsx

// Jobs.jsx - Route loader for data fetching

export const jobs_Loader = async () => {

  const res = await fetch("http://localhost:5000/jobs");

  return res.json();

};

```



### **4. Dynamic Routes with Parameters**



```jsx

// JobsDetails.jsx - Accessing route parameters

export const job_Details_Loader = async ({ params }) => {

  const { id } = params;

  const res = await fetch(`http://localhost:5000/jobs/${id}`);

  return res.json();

};

```



### **5. Navigation Patterns**



```jsx

// Navbar.jsx - NavLink with active states

 (isActive ? "active" : "")}>

  Jobs

;



// Programmatic navigation

const navigate = useNavigate();

navigate("/contact", { replace: true });

```



## 🎨 Design System (Supporting the Demo)



### Color Palette



- **Primary**: Blue gradient (#0ea5e9 to #0284c7)

- **Secondary**: Purple gradient (#d946ef to #c026d3)

- **Neutral**: Comprehensive gray scale

- **Semantic**: Success, warning, and error colors



### Typography



- **Font Family**: Inter (Google Fonts)

- **Scale**: 12 responsive text sizes

- **Weights**: Light (300) to Extra Bold (800)

- **Line Heights**: Optimized for readability



### Spacing System



- **Base Unit**: 8px

- **Scale**: 1x to 24x (8px to 192px)

- **Consistent**: Applied throughout all components



## 🔧 React Router Features Demonstrated



### ✅ **Core Routing Concepts**



- [x] Basic route configuration with createBrowserRouter

- [x] Nested routes and layout components

- [x] Index routes for default children

- [x] Dynamic routes with URL parameters

- [x] Route loaders for data fetching

- [x] Error boundaries and error handling

- [x] 404 handling with catch-all routes



### ✅ **Navigation Patterns**



- [x] NavLink with active state styling

- [x] Programmatic navigation with useNavigate

- [x] Link components for declarative navigation

- [x] Navigation state and replace options

- [x] Route transitions with animations



### ✅ **Advanced Features**



- [x] Layout routes with shared components

- [x] Route-specific error boundaries

- [x] Data loading with async loaders

- [x] URL parameter extraction

- [x] Route protection patterns

- [x] Loading states and fallbacks



### ✅ **Supporting UI/UX**



- [x] Modern design system for visual appeal

- [x] Responsive design for all devices

- [x] Smooth animations and transitions

- [x] Professional content and layouts

- [x] Interactive components and forms



## 🌟 Learning Highlights



### **React Router 7 Mastery**



- Complete route configuration patterns

- Advanced nested routing techniques

- Data loading and error handling strategies

- Navigation patterns and best practices



### **Real-World Application**



- Enterprise-level routing architecture

- Scalable component organization

- Professional error handling

- Performance optimization techniques



### **Modern Development Practices**



- TypeScript-ready component structure

- ESLint configuration for code quality

- Modern JavaScript and React patterns

- Professional project organization



## 📱 Responsive Design



The application is fully responsive and optimized for:



- **Mobile**: 320px - 768px

- **Tablet**: 768px - 1024px

- **Desktop**: 1024px and above



## 🎭 Animations (Enhanced Learning Experience)



Powered by Framer Motion, the application includes:



- Page transition animations

- Staggered list animations

- Hover and focus micro-interactions

- Loading state animations

- Scroll-triggered animations



## 🔮 Potential Extensions



- [ ] Authentication routes and protected routes

- [ ] Search functionality with query parameters

- [ ] Infinite scrolling with route state

- [ ] Modal routes and parallel routing

- [ ] Route-based code splitting

- [ ] Advanced error recovery patterns



## đŸŽ¯ Learning Objectives



After exploring this project, you should understand:



- How to configure React Router 7 with modern patterns

- Nested routing and layout component strategies

- Data loading patterns with route loaders

- Error handling and boundary implementation

- Navigation patterns and active state management

- Dynamic routing with URL parameters

- Route organization and scalable architecture



## 🙏 Acknowledgments



- **React Router Team** for the excellent routing library

- **React Team** for the powerful framework

- **Remix Team** for React Router 7 innovations

- **Community** for routing patterns and best practices



---





  
Learn React Router 7 through hands-on exploration


  
TechCorp theme provides visual context for routing demonstrations