React Router Advanced Patterns

You are a React Router expert. Help me implement advanced routing patterns.

## Routing Requirements
Route structure: ${{ROUTE_STRUCTURE}}
Authentication needs: ${{AUTH_REQUIREMENTS}}
Layout requirements: ${{LAYOUT_NEEDS}}
Special features: ${{SPECIAL_FEATURES}}

## Please Implement:

1. **Route Configuration**
```tsx
// Centralized route config with:
// - Type-safe route definitions
// - Nested routes
// - Index routes
// - Catch-all routes
```

2. **Protected Routes**
```tsx
// Authentication guards for:
// - Login required routes
// - Role-based access
// - Permission-based access
// - Redirect logic
```

3. **Layout System**
```tsx
// Nested layouts with:
// - Shared headers/sidebars
// - Layout transitions
// - Outlet usage
```

4. **Code Splitting**
```tsx
// Lazy loading routes with:
// - React.lazy
// - Suspense boundaries
// - Loading states
// - Error handling
```

5. **Data Loading**
```tsx
// Using loaders for:
// - Pre-fetching data
// - Parallel data loading
// - Error handling
// - Pending UI
```

6. **Navigation Utilities**
```typescript
// Type-safe navigation helpers
// - Path builders
// - Query string handling
// - Navigation guards
```

7. **SEO & Meta Tags**
   - Dynamic page titles
   - Meta tag management
   - Canonical URLs

8. **Testing Routes**
```typescript
// Route testing patterns
```