epic-routing_skill

Overview

This skill guides routing with React Router and react-router-auto-routes for Epic Stack apps. It explains file-based routing, route groups, nested layouts, resource routes, loaders, actions, params, and search params. Follow pragmatic Epic Web principles to keep routes simple and purposeful.

How this skill works

The skill inspects and explains how to map files under app/routes to URL routes using react-router-auto-routes. It shows how to create _layout.tsx for shared layouts, $param files for dynamic segments, and resource routes that return data or handle webhooks. It also covers loader and action patterns plus using useSearchParams for query handling.

When to use it

• Adding new pages or routes to an Epic Stack application
• Implementing shared or nested layouts for route segments
• Creating resource-only endpoints (APIs, downloads, healthchecks)
• Handling route parameters and query/search params
• Implementing loaders and actions for data loading and mutations
• Organizing code with file co-location and route groups

Best practices

• Start with simple route files; add nested routes only when needed
• Use _layout.tsx for shared UI and include <Outlet /> for child rendering
• Name dynamic segments with $param.tsx and validate params in loaders
• Keep resource routes free of default exports; export only loader/action
• Co-locate shared utilities next to routes using a +shared folder
• Use ignoredRouteFiles in app/routes.ts to exclude non-route files

Example use cases

• Create a products section with products/_layout.tsx and products/index.tsx
• Add a dynamic product page at products/$slug.tsx with a loader and ErrorBoundary
• Implement a healthcheck resource at resources/healthcheck.tsx returning OK/ERROR responses
• Build nested user notes with users/$username/notes/_layout.tsx and child routes for notes list and note details
• Expose a report download route that returns a PDF from a loader