react-router-project-conventions

Structure React Router v7 routes using a modular pattern with route.ts barrels and per-route files like component.tsx, loader.ts, action.ts, meta.ts, and handle.ts. This separates server logic from UI components for scalable, testable route management.

Organize flatRoutes by mapping folder names directly to URL paths under dashboard/app/routes or marketing/app/routes. This ensures predictable URL structures and consistent routing conventions across both web apps.

Separate server logic from UI components by using dedicated per-route files for loaders, actions, and meta within the route folder, exporting them via a route.ts barrel to keep data fetching distinct from component rendering.

Yes, you can integrate MetadataComposer for marketing overlays by following the project conventions to lift components and assemble metadata within the route.meta.ts file, ensuring consistent SEO and overlay patterns across marketing routes.

Create new route pieces when adding entirely new pages, layouts, or resources under dashboard or marketing apps. Modify existing flatRoutes only when adjusting URL structures, ensuring you maintain the shared modular routing pattern.

Standardized routing conventions reduce divergence and mistakes when creating new pages or layouts. Enforcing a shared modular pattern across dashboard and marketing apps ensures consistency, safer practices, and faster team onboarding.