Remix Framework and React Router v7 Cheat Sheet

Updated 2026-05-17

Next Topic: Responsive Web Design Cheat Sheet

Remix is a full-stack web framework built on React Router v7 that emphasizes web standards, progressive enhancement, and server-side rendering. React Router v7 unifies Remix and React Router into a single package with three modes: Declarative (basic routing), Data (loaders/actions via createBrowserRouter), and Framework (full-stack with Vite plugin). Unlike traditional SPAs, Remix encourages nested routing, server-first data loading, and form-based mutations that work before JavaScript loads, ensuring resilient user experiences. The framework handles automatic revalidation after mutations, supports streaming SSR with Suspense, and offers type-safe data flow between server and client—making it particularly strong for SEO-critical apps, content-heavy sites, and applications demanding fast perceived performance.

What This Cheat Sheet Covers

This topic spans 14 focused tables and 120 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Route Configuration and File-Based RoutingTable 2: Nested Routes and LayoutsTable 3: Data Loading with LoadersTable 4: Data Mutations with ActionsTable 5: Form Handling and SubmissionTable 6: Error Boundaries and Error HandlingTable 7: Streaming and Deferred DataTable 8: Navigation Hooks and ComponentsTable 9: Route Module ExportsTable 10: Session Management and CookiesTable 11: Prefetching and Performance OptimizationTable 12: TypeScript Integration and Type SafetyTable 13: Migration and Version-Specific FeaturesTable 14: Deployment and Adapters

Table 1: Route Configuration and File-Based Routing

File-based routing in Remix converts your file structure into URL paths automatically, while React Router v7 supports both file-based and programmatic route configuration. Understanding dynamic segments, splat routes, and optional parameters enables flexible URL patterns without complex regex or manual matching.

Pattern	Example	Description
Dynamic segment	`app/routes/posts.$postId.tsx` `/posts/123` → `params.postId = "123"`	• Prefixed with `$` — matches any value in that URL segment • accessible via `useParams()` hook or loader/action `params` argument
Nested routes with dot notation	`app/routes/dashboard.settings.tsx` Renders inside `dashboard.tsx`'s `<Outlet />`	• Dot separates parent/child — child route renders within parent's `<Outlet />` • automatic parent layout wrapping
Index routes	`app/routes/dashboard._index.tsx` Matches `/dashboard` exactly	• `_index.tsx` suffix — renders when parent route matches without additional path segments • prevents blank outlet area
Splat routes (catchall)	`app/routes/files.$.tsx` `/files/docs/guide.pdf` → `params["*"] = "docs/guide.pdf"`	• *`$.tsx` or `$.tsx` — matches remaining URL path including slashes • useful for file browsers, proxies, 404 catchalls**
Optional segments	`app/routes/($lang)._index.tsx` Matches `/` and `/en`	• Parentheses make segment optional — route matches with or without that segment • use for i18n paths that can be omitted

Table 1: Route Configuration and File-Based Routing

Pattern	Example	Description
Dynamic segment	`app/routes/posts.$postId.tsx` `/posts/123` → `params.postId = "123"`	• Prefixed with `$` — matches any value in that URL segment • accessible via `useParams()` hook or loader/action `params` argument
Nested routes with dot notation	`app/routes/dashboard.settings.tsx` Renders inside `dashboard.tsx`'s `<Outlet />`	• Dot separates parent/child — child route renders within parent's `<Outlet />` • automatic parent layout wrapping
Index routes	`app/routes/dashboard._index.tsx` Matches `/dashboard` exactly	• `_index.tsx` suffix — renders when parent route matches without additional path segments • prevents blank outlet area
Splat routes (catchall)	`app/routes/files.$.tsx` `/files/docs/guide.pdf` → `params["*"] = "docs/guide.pdf"`	• *`$.tsx` or `$.tsx` — matches remaining URL path including slashes • useful for file browsers, proxies, 404 catchalls**
Optional segments	`app/routes/($lang)._index.tsx` Matches `/` and `/en`	• Parentheses make segment optional — route matches with or without that segment • use for i18n paths that can be omitted