react-router-v7-app

What problem does it solve?

This Skill provides a standardized blueprint for building React Router v7 apps, ensuring consistent routing patterns, data loading conventions, and component architecture across projects.

Core Features & Use Cases

• Route structure: File-based routing under app/routes with route.tsx components, underscore-prefixed groups (e.g., _app) and dot notation for nested routes (e.g., users.$id.tsx).
• Data loading patterns: Use loader functions for server-side data, action functions for mutations, and useLoaderData()/useActionData() with proper error handling via ErrorBoundary.
• Use Case: When starting a new React project or refactoring an existing one to align with a scalable router structure.

Quick Start

Create a sample React Router v7 app structure with routes under app/routes, including a loader for data and an action for form submissions to demonstrate end-to-end data flow.