Instruction file imported from fdeandrade-salesforce/sf-next-composer (.cursor/rules/routing-navigation.mdc). Copyright stays with the author.

Routing and Navigation Standards

React Router v7

• File-based Routing: Routes defined in routes.ts
• Route Parameters: Use :paramName syntax for dynamic routes
• Nested Routes: Implement proper nested routing structure

Navigation Components

• Header Navigation: Implement in src/components/navigation/
• Breadcrumbs: Use CategoryBreadcrumbs component for category navigation
• Search: Implement search functionality with proper routing
• Cart Navigation: Use cart badge and sheet components

Route Structure

• Use file name as route
• Do not use folder convention for routes
• All routes are flat files in src/routes/ directory
• Action files (.ts) handle form submissions and API calls
• Resource files (.ts) provide data for routes

src/routes/
├── _index.tsx                    # Home page (/)
├── cart.tsx                      # Cart page (/cart)
├── action.cart-bundle-add.tsx    # Add bundle product to cart action
├── action.cart-item-add.tsx      # Add variant product to cart action
├── action.cart-set-add.tsx       # Add set product to cart action
├── action.promo-code-add.tsx     # Add promo code action
├── action.promo-code-remove.tsx  # Remove promo code action
├── callback.tsx                  # OAuth callback
├── category.$categoryId.tsx      # Category page
├── login.tsx                     # Login page
├── logout.ts                     # Logout action
├── product.$productId.tsx        # Product page
├── reset-password.tsx            # Reset password page
├── resource.category.$categoryId.ts # Category resource
├── search.tsx                    # Search page
└── signup.tsx                    # Signup page

Navigation Best Practices

• Implement proper loading states for route transitions
• Use React Router hooks for programmatic navigation
• Handle route parameters with proper TypeScript types
• Implement proper error boundaries for route errors