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, 89 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
A jump-to index of every table row in this cheat sheet.
An interactive map of every table and concept in this topic.
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 | |
|---|---|---|---|
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 | ||
app/routes/dashboard.settings.tsxRenders inside dashboard.tsx's <Outlet /> | • Dot separates parent/child — child route renders within parent's <Outlet />• automatic parent layout wrapping | ||
app/routes/dashboard._index.tsxMatches /dashboard exactly | • _index.tsx suffix — renders when parent route matches without additional path segments• prevents blank outlet area | ||
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 | ||
app/routes/($lang)._index.tsxMatches / and /en | • Parentheses make segment optional — route matches with or without that segment • use for i18n paths that can be omitted | ||
app/routes/_auth.login.tsxapp/routes/_auth.signup.tsxURL: /login, /signup | • Underscore prefix — groups routes under shared layout without adding URL segment • common for authentication wrappers | ||
app/routes/sitemap[.]xml.tsxURL: /sitemap.xml | • Square brackets [] — treats dot as literal character in URL, not route separator• use for file extensions in route paths | ||
routes(defineRoutes) { return defineRoutes(route => { route("/", "home.tsx", { index: true }); });} | • Manual control in vite.config.ts — override file-based routing• useful for migrations, custom patterns, monorepo setups | ||
export default [ index("home.tsx"), route("about", "about.tsx"),] satisfies RouteConfig; | • New routes.ts API in RR v7 — config-based routing replaces Remix's routes option• cleaner syntax for programmatic definitions | ||
{ path: "/admin", lazy: () => import("./admin"),} | • Code splitting per route — loader, action, Component loaded on demand • reduces initial bundle size for infrequently visited routes |