React Router v7 App Implementation

1. Route Structure

• Use file-based routing in app/routes/.
• Route files: route.tsx for route components.
• Use underscore prefix for route groups: _app, _landing.
• Use dot notation for nested routes: users.$id.tsx.

2. Data Loading Patterns

• Use loader functions for server-side data fetching.
• Use action functions for form submissions and mutations.
• Leverage useLoaderData() and useActionData() hooks.
• Handle loading states with useNavigation().

3. Route Component Structure

Use arrow functions for all exports.

import type { Route } from './+types/route';