react-router-v7-app

React Router v7 App Implementation

1. Route Structure

• Use file-based routing in app/routes/.
• Route files: route.tsx for route components.
• Prefer folder routes like users.$id/route.tsx when a route needs colocated helpers, components, or tests; sibling files in the folder do not become routes.
• If tests live under app/routes/, configure flatRoutes({ ignoredRouteFiles: [...] }) to exclude *.test.* and *.spec.* from route discovery.
• 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';

export const loader = async ({ request, params, context }: Route.LoaderArgs) => {
  // Server-side data loading
  // Return an object
  return { ... };
};

export const action = async ({ request, params, context }: Route.ActionArgs) => {
  // Handle form submissions and mutations
  // Return an object
  return { ... };
};

const Page = ({ loaderData, actionData }: Route.ComponentProps) => {
  // Component implementation with typed props
  return (
    <div>
      {/* Content */}
    </div>
  );
};

export default Page;

4. Error Handling

• Use ErrorBoundary components for route-level error handling.
• Implement proper error responses in loaders/actions.
• Use isRouteErrorResponse() for typed error handling.

5. Meta and Headers

• Export meta function for dynamic page metadata.
• Export headers function for custom HTTP headers.
• Use proper SEO practices with meta tags.

6. Project Structure

The app folder should follow this structure:

public                # Static files (images, fonts, etc.)
|
app
|
+-- components        # Shared components
|
+-- config            # Global configuration and environment variables
|
+-- constants         # Global constants
|
+-- hooks             # Shared hooks
|
+-- lib               # Pre-configured reusable libraries
|
+-- routes            # React Router routing directory
|
+-- stores            # Global state stores
|
+-- testing           # Test utilities and mock servers
|
+-- types             # Base types used across the application
|
+-- utils             # Shared utility functions
|